

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>JavaScript笔记-1 - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="JavaScript笔记-1">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-09-12 23:10" pubdate>
        2021年9月12日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      21.6k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      269
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript笔记-1</h1>
            
            <div class="markdown-body">
              <h1 id="前端基础-JavaScript"><a href="#前端基础-JavaScript" class="headerlink" title="前端基础-JavaScript"></a>前端基础-JavaScript</h1><h2 id="1-数据类型"><a href="#1-数据类型" class="headerlink" title="1.数据类型"></a>1.数据类型</h2><pre><code class=" mermaid">graph LR
A[JavaScript数据类型]--&gt;B[基本数据类型]
B--&gt;d[String]
B--&gt;e[Number]
B--&gt;f[Boolean]
B--&gt;g[Null]
B--&gt;h[undefined]

A[JavaScript数据类型]--&gt;C[复杂数据类型]
C--&gt;D[object]
</code></pre>

<h3 id="1-1字符串类型String"><a href="#1-1字符串类型String" class="headerlink" title="1.1字符串类型String"></a>1.1字符串类型String</h3><blockquote>
<p>字符串数据类型是JavaScript当中最常见的数据类型，也是最根本的数据类型，它使用引号来包裹（所有</p>
<p>使用引号包裹的都是字符串类型）</p>
</blockquote>
<hr>
<h3 id="1-2数字类型Number"><a href="#1-2数字类型Number" class="headerlink" title="1.2数字类型Number"></a>1.2数字类型Number</h3><blockquote>
<p>在其它的编程语言里面可能会有整数<code>int</code>，单精度<code>float</code>，双精度<code>double</code>等数据类型，<strong>但是在JS里面没有这个概念，JS里面无论是整数还是小数，无论是正数还是负数都通通称之为Number类型</strong>（只有范围没有类型）</p>
</blockquote>
<p><strong>16进制</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//十六进制</span><br><span class="hljs-keyword">var</span> b = <span class="hljs-number">0x100</span>; <span class="hljs-comment">//使用时会自动转成10进制</span><br></code></pre></td></tr></table></figure>

<h4 id="1-2-1Number中的特殊值NaN"><a href="#1-2-1Number中的特殊值NaN" class="headerlink" title="1.2.1Number中的特殊值NaN"></a>1.2.1Number中的特殊值NaN</h4><blockquote>
<p><code>NaN</code>是一个非常特殊的数字类型，它的全称叫<code>Not a Number</code>，这个值代表本来经过处理以应该得到一个数字的现在又出现了意外没有得到数字，这个时候就会显示出<code>NaN</code>这个特殊的值</p>
</blockquote>
<hr>
<h3 id="1-3布尔类型Boolean"><a href="#1-3布尔类型Boolean" class="headerlink" title="1.3布尔类型Boolean"></a>1.3布尔类型Boolean</h3><blockquote>
<p>布尔类型是大多数编程语言里面都具备的数据类型，这个数据类型下在只有两个值，分别是<code>true</code>和<code>false</code>，在编程过程当中用于判断条件的真或假</p>
</blockquote>
<hr>
<h3 id="1-4未定义类型Undefined"><a href="#1-4未定义类型Undefined" class="headerlink" title="1.4未定义类型Undefined"></a>1.4未定义类型Undefined</h3><blockquote>
<p>未下义类型指是的<code>JavaScript</code>里面定义了变量又不赋值，这个时候这个变量就没有被初始化，它就是一个未定义的类型</p>
</blockquote>
<hr>
<h3 id="1-5空类型Null"><a href="#1-5空类型Null" class="headerlink" title="1.5空类型Null"></a>1.5空类型Null</h3><p><code>null</code>与我们上面所学习的<code>undefined</code>非常相似，它也代表没有。但是它们2个是有本质性的区别</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a;                      <span class="hljs-comment">//未定义udnefined类型</span><br><span class="hljs-keyword">var</span> b = <span class="hljs-literal">null</span>;               <span class="hljs-comment">//这是一个空类型</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>b变量这个时候就是一个null，相当于一个房子，但是这个房子是一个空的，a是undefined，它相当于连这个房子都没有</p>
</blockquote>
<hr>
<h2 id="2-JavaScript的弱类型机制"><a href="#2-JavaScript的弱类型机制" class="headerlink" title="2.JavaScript的弱类型机制"></a>2.JavaScript的弱类型机制</h2><blockquote>
<p>在JavaScript当中，变量是没有固定的数据类型的，<u>它的数据类型会随着我们的变量赋值来发生变化</u>。我们赋什么类型值，这个变量就是什么数据类型。这种变化机制我们叫<code>JavaScript</code>的弱类型机制。</p>
</blockquote>
<ul>
<li>强类型编程语言在定义变量的时候前面都必须声明变量的数据类型，如<code>Java,C#,C,C++</code>等</li>
<li>弱类型编程语言就不定声明变量类型，如<code>JavaScript</code>里面的<code>var</code></li>
</ul>
<hr>
<h2 id="3-数据类型检测"><a href="#3-数据类型检测" class="headerlink" title="3.数据类型检测"></a>3.数据类型检测</h2><p>在JavaScript里面，数据类型检测也使用一个特殊的关键字，这个关键字叫<code>typeof</code></p>
<p><strong>两种写法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">typeof</span> a;<br><span class="hljs-keyword">typeof</span> (a);<br></code></pre></td></tr></table></figure>

<p><strong>特殊值</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">typeof</span>(<span class="hljs-literal">NaN</span>);    <span class="hljs-comment">//&quot;number&quot;</span><br><span class="hljs-keyword">typeof</span>(<span class="hljs-literal">null</span>);   <span class="hljs-comment">//&quot;object&quot;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<h4 id="null并不是对象："><a href="#null并不是对象：" class="headerlink" title="null并不是对象："></a><strong>null并不是对象：</strong></h4><p><code>null</code>其实并不是一个对象，尽管<code>typeof null</code> 输出的是<code>object</code>,但是这其实是一个bug。在js最初的版本中使用的是32位系统，为了性能考虑地位存储变量的类型信息，<code>000</code>开头表示为对象类型，然而<code>null</code>为全0，故而<code>null</code>被判断为对象类型。</p>
</blockquote>
<hr>
<h2 id="4-数据类型转换"><a href="#4-数据类型转换" class="headerlink" title="4.数据类型转换"></a>4.数据类型转换</h2><p>JavaScript里面有5种基本的数据类型，这5种基本的数据类型是可以相互之间发生类型转换的，通常情况下，我们可以将字符串，数字，以及布尔类型这几个进行相互的转换</p>
<h3 id="4-1字符串转十进制数值"><a href="#4-1字符串转十进制数值" class="headerlink" title="4.1字符串转十进制数值"></a>4.1字符串转十进制数值</h3><p>这个转换是有条件限制的，它必须 是字符串的数字</p>
<blockquote>
<p>所谓的字符串数字就是指带引号的数字，如<code>&quot;123&quot;,&quot;456a&quot;,&quot;78.4&quot;</code>等</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-string">&quot;123&quot;</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-string">&quot;45a6&quot;</span>;<br><span class="hljs-keyword">var</span> c = <span class="hljs-string">&quot;123.45&quot;</span>;<br><span class="hljs-keyword">var</span> d = <span class="hljs-string">&quot;a123&quot;</span>;<br><span class="hljs-keyword">var</span> e = <span class="hljs-string">&quot;hello&quot;</span>;<br><span class="hljs-keyword">var</span> f = <span class="hljs-string">&quot;123.45.67&quot;</span>;<br><span class="hljs-keyword">var</span> g = <span class="hljs-string">&quot;-456&quot;</span>;<br></code></pre></td></tr></table></figure>

<p>上面的代码里面我们定义了7个字符串类型的变量，这7个字符串类型的变量我们想把它转换成Number类型</p>
<p>String类型转Number类型主要有三个方法</p>
<ol>
<li><p><strong>使用<code>Number(value?: any): number</code>来完成转换</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a1 = <span class="hljs-built_in">Number</span>(a);         <span class="hljs-comment">//得到结果123,它是一个number类型</span><br><span class="hljs-keyword">var</span> b1 = <span class="hljs-built_in">Number</span>(b);         <span class="hljs-comment">//得到NaN，它也是一个number类型</span><br><span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">Number</span>(c);         <span class="hljs-comment">//得到结果123.45 ,Number类型</span><br><span class="hljs-keyword">var</span> d1 = <span class="hljs-built_in">Number</span>(d);         <span class="hljs-comment">//得到NaN</span><br><span class="hljs-keyword">var</span> e1 = <span class="hljs-built_in">Number</span>(e);         <span class="hljs-comment">//得到NaN</span><br><span class="hljs-keyword">var</span> f1 = <span class="hljs-built_in">Number</span>(f);         <span class="hljs-comment">//得到NaN</span><br><span class="hljs-keyword">var</span> g1 = <span class="hljs-built_in">Number</span>(g);         <span class="hljs-comment">//得到结果-456，Number类型</span><br></code></pre></td></tr></table></figure>

<p>经过上面的转换对比，我们得到一个结论<code>Number()</code>只能转换合法的字符串数字，如果之前的字符串不是合法的字符串数字，则经过转换以后会得到<code>NaN</code></p>
</li>
<li><p><strong>使用<code>parseInt(s:string):number</code>来进行转换</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a1 = <span class="hljs-built_in">parseInt</span>(a);           <span class="hljs-comment">//得到结果 123 Number类型</span><br><span class="hljs-keyword">var</span> b1 = <span class="hljs-built_in">parseInt</span>(b);           <span class="hljs-comment">//得到结果45 Number类型</span><br><span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">parseInt</span>(c);           <span class="hljs-comment">//得到结果123 Number类型</span><br><span class="hljs-keyword">var</span> d1 = <span class="hljs-built_in">parseInt</span>(d);           <span class="hljs-comment">//得到NaN</span><br><span class="hljs-keyword">var</span> e1 = <span class="hljs-built_in">parseInt</span>(e);           <span class="hljs-comment">//得到NaN</span><br><span class="hljs-keyword">var</span> f1 = <span class="hljs-built_in">parseInt</span>(f);           <span class="hljs-comment">//得到123</span><br><span class="hljs-keyword">var</span> g1 = <span class="hljs-built_in">parseInt</span>(g);           <span class="hljs-comment">//得到-456</span><br></code></pre></td></tr></table></figure>

<p>经过上面的对比我们发现，<code>parseInt</code>是可以将字符串数值解析成整数的</p>
<ul>
<li>如果字符串与数字混合，在解析过程当中一旦碰撞到字符串就停止（变量b的转换就是这种情况）</li>
<li>如果第一个就是非数字的字符串，则直接停止，返回<code>NaN</code>(变量d与变量e就是这个情况)</li>
<li>如果是小数的字符串，则直接去掉小数值，保留整数（变量c与变量f就是这个情况）</li>
</ul>
</li>
<li><p><strong>使用<code>parseFloat(s:string):number</code>来进行转换</strong></p>
<p>这个方法与上面的<code>parseInt</code>非常相似，这个可以转换小数，保留小数位的内容</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a1 = <span class="hljs-built_in">parseFloat</span>(a);         <span class="hljs-comment">//得到结果123</span><br><span class="hljs-keyword">var</span> b1 = <span class="hljs-built_in">parseFloat</span>(b);         <span class="hljs-comment">//得到结果45</span><br><span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">parseFloat</span>(c);         <span class="hljs-comment">//得到结果123.95</span><br><span class="hljs-keyword">var</span> d1 = <span class="hljs-built_in">parseFloat</span>(d);         <span class="hljs-comment">//NaN</span><br><span class="hljs-keyword">var</span> e1 = <span class="hljs-built_in">parseFloat</span>(e);         <span class="hljs-comment">//NaN</span><br><span class="hljs-keyword">var</span> f1 = <span class="hljs-built_in">parseFloat</span>(f);         <span class="hljs-comment">//123.45   只找一个小数点</span><br><span class="hljs-keyword">var</span> g1 = <span class="hljs-built_in">parseFloat</span>(g);         <span class="hljs-comment">//-456</span><br></code></pre></td></tr></table></figure>

<p>这个地方的<code>parseFloat</code>就比我们上面的<code>parseInt</code>要更加高级一点，它可以拿到小数的部分</p>
</li>
</ol>
<p><strong>总结</strong>：</p>
<ul>
<li><code>Number</code>的转换是一个整体性的转换，它必须整体是一个合法的字符串数字，而<code>parseInt/parseFloat</code>则是一个一个的转，转成功一个拿一个</li>
<li><code>Number</code>的方法对转换的原值没有要求，可以是任何类型，而<code>parseInt/parseFloat</code>必须是字符串才行</li>
</ul>
<hr>
<h3 id="4-2布尔类型转十进制数值"><a href="#4-2布尔类型转十进制数值" class="headerlink" title="4.2布尔类型转十进制数值"></a>4.2布尔类型转十进制数值</h3><p>布尔类型转数字Number类型只能使用<code>Number(value?:any):number</code>这个方法(而<code>parseInt()</code>和<code>parseFloat()的参数为String</code>)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-literal">true</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-literal">false</span>;<br><br><span class="hljs-comment">// 上面的2个值转Number类型</span><br><br><span class="hljs-keyword">var</span> a1 = <span class="hljs-built_in">Number</span>(a);             <span class="hljs-comment">//结果为1</span><br><span class="hljs-keyword">var</span> b1 = <span class="hljs-built_in">Number</span>(b);             <span class="hljs-comment">//结果为0</span><br></code></pre></td></tr></table></figure>

<hr>
<h3 id="4-3null与undefined转换为数值"><a href="#4-3null与undefined转换为数值" class="headerlink" title="4.3null与undefined转换为数值"></a>4.3null与undefined转换为数值</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-literal">null</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-literal">undefined</span>;<br><span class="hljs-keyword">var</span> a1 = <span class="hljs-built_in">Number</span>(a);             <span class="hljs-comment">//0    null</span><br><span class="hljs-keyword">var</span> b1 = <span class="hljs-built_in">Number</span>(b);             <span class="hljs-comment">//NaN  undefined</span><br></code></pre></td></tr></table></figure>

<p>注意：上面的2个值不要通过<code>parseInt</code>去转换，否则都会得到<code>NaN</code></p>
<hr>
<h3 id="4-4其它类型转换为字符串"><a href="#4-4其它类型转换为字符串" class="headerlink" title="4.4其它类型转换为字符串"></a>4.4其它类型转换为字符串</h3><p>在JS里面，所有的数据类型都可以转换为字符串类型，并且转换过程是最简单的（直接加引号）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">123</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-literal">true</span>;<br><span class="hljs-keyword">var</span> c = <span class="hljs-number">456.78</span>;<br><span class="hljs-keyword">var</span> d = <span class="hljs-literal">null</span>;<br><span class="hljs-keyword">var</span> e = <span class="hljs-literal">undefined</span>;<br></code></pre></td></tr></table></figure>

<ol>
<li><p><strong>使用<code>String(value?:any):string</code>方法来进行转换</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a1 = <span class="hljs-built_in">String</span>(a);         <span class="hljs-comment">// 字符串&quot;123&quot;</span><br><span class="hljs-keyword">var</span> b1 = <span class="hljs-built_in">String</span>(b);         <span class="hljs-comment">// 字符串&quot;true&quot;</span><br><span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">String</span>(c);         <span class="hljs-comment">// 字符串&quot;456.78&quot;</span><br><br><span class="hljs-keyword">var</span> d1 = <span class="hljs-built_in">String</span>(d);         <span class="hljs-comment">// 字符串&quot;null&quot;</span><br><span class="hljs-keyword">var</span> e1 = <span class="hljs-built_in">String</span>(e);         <span class="hljs-comment">// 字符串&quot;undefined&quot;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>直接将这个变量加上一个空字符串</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a1 = a + <span class="hljs-string">&quot;&quot;</span>;            <span class="hljs-comment">//字符串&quot;123&quot;</span><br><span class="hljs-keyword">var</span> b1 = b + <span class="hljs-string">&quot;&quot;</span>;            <span class="hljs-comment">//字符串&quot;true&quot;</span><br><span class="hljs-keyword">var</span> c1 = c + <span class="hljs-string">&quot;&quot;</span>;            <span class="hljs-comment">//字符串&quot;456.78&quot;</span><br><br><span class="hljs-keyword">var</span> d1 = d + <span class="hljs-string">&quot;&quot;</span>;            <span class="hljs-comment">//字符串&quot;null&quot;</span><br><span class="hljs-keyword">var</span> e1 = e + <span class="hljs-string">&quot;&quot;</span>;            <span class="hljs-comment">//字符串&quot;undefined&quot;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><strong>通过<code>toString()</code>的方式来进行</strong>，只适用于非null与undefined的类型</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a1 = a.toString();      <span class="hljs-comment">//得到字符串&quot;123&quot;</span><br><span class="hljs-keyword">var</span> b1 = b.toString();      <span class="hljs-comment">//得到字符串&quot;true&quot;</span><br><span class="hljs-keyword">var</span> c1 = c.toString();      <span class="hljs-comment">//得到字符串&quot;456.78&quot;</span><br><br>d.toString();				<span class="hljs-comment">//报错 null类型没有toString()的方法</span><br>e.toString();				<span class="hljs-comment">//报错 undefined类型没有toString()的方法</span><br></code></pre></td></tr></table></figure>

</li>
</ol>
<h3 id="4-5其它类型转布尔值"><a href="#4-5其它类型转布尔值" class="headerlink" title="4.5其它类型转布尔值"></a>4.5其它类型转布尔值</h3><p>在整个JS的体系里面，能够被描述为false的只有6个值，这6个值被称之为明确的<code>false</code>。这6个值分别是<code>0,空字符串&quot;&quot;,false,NaN,null,undefined</code></p>
<table>
<thead>
<tr>
<th>数据类型</th>
<th>值</th>
</tr>
</thead>
<tbody><tr>
<td>字符串String</td>
<td><code>&quot;&quot;</code>空字符串</td>
</tr>
<tr>
<td>数字类型Number</td>
<td><code>0,NaN</code></td>
</tr>
<tr>
<td>布尔类型</td>
<td><code>false</code></td>
</tr>
<tr>
<td>空类型</td>
<td><code>null</code></td>
</tr>
<tr>
<td>未定义类型</td>
<td><code>undefined</code></td>
</tr>
</tbody></table>
<h2 id="5-数字进制之间的转换"><a href="#5-数字进制之间的转换" class="headerlink" title="5.数字进制之间的转换"></a>5.数字进制之间的转换</h2><h3 id="5-1十进制转其它进制"><a href="#5-1十进制转其它进制" class="headerlink" title="5.1十进制转其它进制"></a>5.1十进制转其它进制</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">66</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-number">18</span>;<br></code></pre></td></tr></table></figure>

<p>如果我们十进制数值要转换成我们的其它进制可以调用系统当中的一个方法叫<code>toString(radix?:number)</code>，在转换的时候，我们之前也调用这个方法，只是没有向方法里面设置参数<code>radix</code>,它代表了我们目标进制</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">a.toString(<span class="hljs-number">2</span>);				<span class="hljs-comment">//得到2进制的结果 &quot;1000010&quot;</span><br>b.toString(<span class="hljs-number">2</span>);				<span class="hljs-comment">//得到2进制的结果 &quot;10010&quot;</span><br></code></pre></td></tr></table></figure>

<p>十进制的要转其它的进制非常的简单，直接调用<code>toString(radix?:number)</code>就可以 了，<strong>如果不写目标进制，则默认就是10进制</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">toString(目标进制);<br><span class="hljs-comment">//目标进制如果不填，则默认就是10进制</span><br></code></pre></td></tr></table></figure>

<p><strong>转16进制</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> c = <span class="hljs-number">255</span>;				<span class="hljs-comment">//这是十进制的255</span><br>c.toString(<span class="hljs-number">16</span>);				<span class="hljs-comment">//转化为目标进制十六进制以后，得到“ff”</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在之前给大家讲过，如果要对一个变量赋值十六进制的数，要对这个数值前面添加<code>0x</code>,十六进制的数是从<code>0~9,A-F</code>来完成的，其实字母不区分大小写</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">0xff</span>;			<span class="hljs-comment">//这其实就是十六进制的赋值</span><br></code></pre></td></tr></table></figure>

<h3 id="5-2其它进制转十进制"><a href="#5-2其它进制转十进制" class="headerlink" title="5.2其它进制转十进制"></a>5.2其它进制转十进制</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-string">&quot;10010&quot;</span>;			<span class="hljs-comment">//这里是2进制的10010</span><br><span class="hljs-keyword">var</span> b = <span class="hljs-string">&quot;1000010&quot;</span>;			<span class="hljs-comment">//这里是2进制的1000010</span><br></code></pre></td></tr></table></figure>

<p>主要使用<code>parseInt(s:string,radix:number):number</code>来实现。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">parseInt</span>(a,<span class="hljs-number">2</span>);				<span class="hljs-comment">//得到10进制的结果 18</span><br><span class="hljs-built_in">parseInt</span>(b,<span class="hljs-number">2</span>);				<span class="hljs-comment">//得到10进制的结果 66</span><br></code></pre></td></tr></table></figure>

<p>通过上面的2个方法，我们大概知道它的使用过程</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">parseInt</span>(原来的数字,原来的进制);			<span class="hljs-comment">//它的结果一定是一个10进制数的结果</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>如果在这里没有设置原来的进制，它会认为是10进制</p>
</blockquote>
<p><strong>16进制转10进制</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> c = <span class="hljs-string">&quot;ff&quot;</span>;<br><span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">parseInt</span>(c,<span class="hljs-number">16</span>);				<span class="hljs-comment">//得到10进制的255</span><br></code></pre></td></tr></table></figure>



<hr>
<hr>
<h2 id="6-JavaScript运算符"><a href="#6-JavaScript运算符" class="headerlink" title="6.JavaScript运算符"></a>6.JavaScript运算符</h2><h3 id="6-1一元操作符"><a href="#6-1一元操作符" class="headerlink" title="6.1一元操作符"></a>6.1一元操作符</h3><p><strong>只能操作一个值</strong>的操作符我们叫一元操作符。一元操作符是ECMAScript当中最简单的一种操作符。<strong>一元操作符的结果一定是一个Number类型</strong></p>
<h4 id="6-1-1递增递减操作符"><a href="#6-1-1递增递减操作符" class="headerlink" title="6.1.1递增递减操作符"></a>6.1.1递增递减操作符</h4><h5 id="递增操作符"><a href="#递增操作符" class="headerlink" title="递增操作符"></a>递增操作符</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">3</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-number">3</span>;<br><br>a = a + <span class="hljs-number">1</span>; <span class="hljs-comment">//4</span><br>b++;       <span class="hljs-comment">//4</span><br></code></pre></td></tr></table></figure>

<p><strong>b++与++b的区别</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">3</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-number">3</span>;<br><span class="hljs-built_in">console</span>.log(a++);			<span class="hljs-comment">//3</span><br><span class="hljs-built_in">console</span>.log(++b);			<span class="hljs-comment">//4</span><br></code></pre></td></tr></table></figure>

<ol>
<li>符号在后，先使用这个变量，使用完以后，再去变化这个变量</li>
<li>括号在前，先将这个变量变化以后，再去使用这个变量</li>
</ol>
<p><strong>案例：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">11</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-number">12</span>;<br><span class="hljs-keyword">var</span> c = <span class="hljs-number">13</span>;<br><br>a++;            <span class="hljs-comment">//12</span><br>++a;            <span class="hljs-comment">//13</span><br>	<span class="hljs-comment">//   13    13    13   15(第一个a++后为14)</span><br><span class="hljs-keyword">var</span> d = a++ + ++b + c++ + ++a;<br><span class="hljs-comment">//请说出a,b,c,d的值各是多少？</span><br><span class="hljs-comment">//a:15</span><br><span class="hljs-comment">//b:13</span><br><span class="hljs-comment">//c:14</span><br><span class="hljs-comment">//d:54</span><br></code></pre></td></tr></table></figure>

<h5 id="递减操作符"><a href="#递减操作符" class="headerlink" title="递减操作符"></a>递减操作符</h5><p><strong>递减操作符与上面的递增操作符原理是一样的</strong></p>
<p>递减操作符就是在原来的值上面去减1，它的操作符号是<code>--</code>，同样，这个符号也可以放在变量的前面，还可以放在变量的后面</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">8</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-number">8</span>;<br><br><span class="hljs-built_in">console</span>.log(a--);		<span class="hljs-comment">//8</span><br><span class="hljs-built_in">console</span>.log(--b);		<span class="hljs-comment">//7</span><br></code></pre></td></tr></table></figure>

<h5 id="特殊类型值的递增递减操作"><a href="#特殊类型值的递增递减操作" class="headerlink" title="特殊类型值的递增递减操作"></a>特殊类型值的递增递减操作</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-string">&quot;1&quot;</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-string">&quot;hello&quot;</span>;<br><span class="hljs-keyword">var</span> c = <span class="hljs-string">&quot;&quot;</span>;<br><span class="hljs-keyword">var</span> d = <span class="hljs-literal">true</span>;<br><span class="hljs-keyword">var</span> e = <span class="hljs-literal">false</span>;<br><span class="hljs-keyword">var</span> f = <span class="hljs-literal">null</span>;<br><span class="hljs-keyword">var</span> g = <span class="hljs-literal">undefined</span>;<br><span class="hljs-keyword">var</span> h = <span class="hljs-literal">NaN</span>;<br></code></pre></td></tr></table></figure>

<p>上面的值都不属于我们的数字类型，这个时候当他们进行递增递减操作的时候会有什么情况呢？</p>
<p><strong>操作原则</strong></p>
<ol>
<li>一元操作符的结果一定是一个<code>Number</code>类型</li>
<li>如果是非数字执行的递增与递减操作，则先将这个值进行<code>Number()</code>的转换</li>
<li><code>NaN</code>不参于运算，即使参于运算，结果也一定是<code>NaN</code></li>
<li>符号在后，先使用自己，再变化自己；符号在前，先变化自己，再使用自己</li>
</ol>
<h4 id="6-1-2一元加减操作符"><a href="#6-1-2一元加减操作符" class="headerlink" title="6.1.2一元加减操作符"></a>6.1.2一元加减操作符</h4><p>一元加减操作符是JS里面一种特殊的操作符，它相当于执行了<code>Number</code>的类型转换，它的结果也是一定是Number类型</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-string">&quot;01&quot;</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-string">&quot;1.1&quot;</span>;<br><span class="hljs-keyword">var</span> c = <span class="hljs-string">&quot;z&quot;</span>;<br><span class="hljs-keyword">var</span> d = <span class="hljs-literal">false</span>;<br><span class="hljs-keyword">var</span> e = <span class="hljs-number">1.1</span>;<br><span class="hljs-keyword">var</span> f = <span class="hljs-literal">NaN</span>;<br><span class="hljs-keyword">var</span> g = <span class="hljs-literal">null</span>;<br><span class="hljs-keyword">var</span> h = <span class="hljs-literal">undefined</span>;<br></code></pre></td></tr></table></figure>

<h5 id="一元加法操作符"><a href="#一元加法操作符" class="headerlink" title="一元加法操作符"></a>一元加法操作符</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript">a = +a;             <span class="hljs-comment">//1</span><br>b = +b;             <span class="hljs-comment">//1.1</span><br>c = +c;             <span class="hljs-comment">//NaN</span><br>d = +d;             <span class="hljs-comment">//0</span><br>e = +e;             <span class="hljs-comment">//1.1</span><br>f = +f;             <span class="hljs-comment">//NaN</span><br>g = +g;             <span class="hljs-comment">//0</span><br>h = +h;             <span class="hljs-comment">//NaN</span><br></code></pre></td></tr></table></figure>

<h5 id="一元减法操作符"><a href="#一元减法操作符" class="headerlink" title="一元减法操作符"></a>一元减法操作符</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript">a = -a;         <span class="hljs-comment">//-1</span><br>b = -b;         <span class="hljs-comment">//-1.1</span><br>c = -c;         <span class="hljs-comment">//NaN</span><br>d = -d;         <span class="hljs-comment">//0</span><br>e = -e;         <span class="hljs-comment">//-1.1</span><br>f = -f;         <span class="hljs-comment">//NaN</span><br>g = -g;         <span class="hljs-comment">//0</span><br>h = -h;         <span class="hljs-comment">//NaN</span><br></code></pre></td></tr></table></figure>

<p><strong>操作原则</strong></p>
<ol>
<li>结果一定是<code>Number</code>类型</li>
<li>非数值的直接通过<code>Number()</code>去转换</li>
<li><code>NaN</code>不能于计算</li>
<li>如果是一元减法操作，则通过<code>Number()</code>转换以后，再乘以<code>-1</code></li>
</ol>
<hr>
<h3 id="6-2加法操作符"><a href="#6-2加法操作符" class="headerlink" title="6.2加法操作符"></a>6.2加法操作符</h3><p>加法操作符是我们使用<code>+</code>来表示，加法操作符的结果不一定是<code>Number</code>类型(可能为字符串)</p>
<blockquote>
<p>因为JS是弱类型的缘故，所以在执行加法运算的时候，不一定是数字在相加，还有可能是其它类型的值在相加</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello&quot;</span> + <span class="hljs-string">&quot;world&quot;</span>);    <span class="hljs-comment">//&quot;helloworld&quot; </span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> + <span class="hljs-number">2</span>);                <span class="hljs-comment">//3</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;1&quot;</span> + <span class="hljs-number">2</span>);              <span class="hljs-comment">//&quot;12&quot;          </span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> + <span class="hljs-number">1</span>);             <span class="hljs-comment">//2</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> + <span class="hljs-string">&quot;1&quot;</span>);           <span class="hljs-comment">//&quot;true1&quot;</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">NaN</span> + <span class="hljs-number">1</span>);              <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">NaN</span> + <span class="hljs-string">&quot;1&quot;</span>);            <span class="hljs-comment">//&quot;NaN1&quot;</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> + <span class="hljs-literal">undefined</span>);        <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;1&quot;</span> + <span class="hljs-literal">undefined</span>);      <span class="hljs-comment">//&quot;1undefined&quot;</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> + <span class="hljs-literal">null</span>);             <span class="hljs-comment">//1</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> + <span class="hljs-literal">true</span>);          <span class="hljs-comment">//2</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> + <span class="hljs-literal">null</span>);          <span class="hljs-comment">//1</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> + <span class="hljs-literal">undefined</span>);     <span class="hljs-comment">//NaN</span><br></code></pre></td></tr></table></figure>

<p><strong>操作原则</strong></p>
<ol>
<li>如果执行加法的时候有字符串，则结果一定是一个拼接型的字符串</li>
<li><code>NaN</code>不参于运算，只要参与计算，则结果一定是<code>NaN</code></li>
<li>对于非数字类型进行加法运算，则先使用<code>Number()</code>进行转换一下</li>
</ol>
<blockquote>
<p>隐藏规则：在加法运算里面，字符串是老大，<code>NaN</code>是老二；<strong>俗称加法字符串优先</strong></p>
</blockquote>
<p><strong>小坑题</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> + +<span class="hljs-string">&quot;2&quot;</span> + <span class="hljs-string">&quot;2&quot;</span>);        <span class="hljs-comment">//&quot;32&quot;  </span><br><span class="hljs-comment">//1+ 2+&quot;2&quot;   +&quot;2&quot; 会转换成number</span><br></code></pre></td></tr></table></figure>

<h3 id="6-3减法操作符"><a href="#6-3减法操作符" class="headerlink" title="6.3减法操作符"></a>6.3减法操作符</h3><p>减法操作符也是算术运算符，它使用<code>-</code>来表示 ，减法操作符的结果一定是<code>Number</code>类型</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> - <span class="hljs-number">1</span>);                 <span class="hljs-comment">//1</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> - <span class="hljs-number">1</span>);               <span class="hljs-comment">//1</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> - <span class="hljs-string">&quot;1&quot;</span>);             <span class="hljs-comment">//1</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> - <span class="hljs-literal">true</span>);            <span class="hljs-comment">//1</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> - <span class="hljs-literal">false</span>);             <span class="hljs-comment">//2</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> - <span class="hljs-literal">null</span>);              <span class="hljs-comment">//1</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> - <span class="hljs-literal">undefined</span>);         <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> - <span class="hljs-literal">NaN</span>);               <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">null</span> - <span class="hljs-literal">true</span>);           <span class="hljs-comment">//-1</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;a&quot;</span> - <span class="hljs-number">1</span>);               <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;a&quot;</span> - <span class="hljs-string">&quot;b&quot;</span>);             <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> - <span class="hljs-number">1</span>);                <span class="hljs-comment">//-1</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> - <span class="hljs-literal">NaN</span>);              <span class="hljs-comment">//NaN</span><br></code></pre></td></tr></table></figure>

<p><strong>操作规则</strong></p>
<ol>
<li>减法操作符得到的结果一定是一个<code>Number</code>类型</li>
<li><code>NaN</code>与任何值相减都是<code>NaN</code></li>
<li>如果执行减法的不是数字，则通过<code>Number</code>去转换一次</li>
</ol>
<h3 id="6-4乘法操作符"><a href="#6-4乘法操作符" class="headerlink" title="6.4乘法操作符"></a>6.4乘法操作符</h3><p>乘法操作符使用的是<code>*</code>来表示 ，它的结果与操作原则与减法保持了一致</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> * <span class="hljs-number">1</span>);                 <span class="hljs-comment">//2</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> * <span class="hljs-number">1</span>);               <span class="hljs-comment">//2</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> * <span class="hljs-string">&quot;1&quot;</span>);             <span class="hljs-comment">//2</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> * <span class="hljs-literal">true</span>);            <span class="hljs-comment">//2</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> * <span class="hljs-literal">false</span>);             <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> * <span class="hljs-literal">null</span>);              <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> * <span class="hljs-literal">undefined</span>);         <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> * <span class="hljs-literal">NaN</span>);               <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">null</span> * <span class="hljs-literal">true</span>);           <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;a&quot;</span> * <span class="hljs-number">1</span>);               <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;a&quot;</span> * <span class="hljs-string">&quot;b&quot;</span>);             <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> * <span class="hljs-number">1</span>);                <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> * <span class="hljs-literal">NaN</span>);              <span class="hljs-comment">//NaN</span><br></code></pre></td></tr></table></figure>

<p><strong>操作原则</strong></p>
<ol>
<li>乘法操作符得到的结果一定是一个<code>Number</code>类型</li>
<li><code>NaN</code>与任何值相乘都是<code>NaN</code></li>
<li>如果执行乘法的不是数字，则通过<code>Number</code>去转换一次</li>
</ol>
<h3 id="6-5除法操作符"><a href="#6-5除法操作符" class="headerlink" title="6.5除法操作符"></a>6.5除法操作符</h3><p>除法操作符使用<code>/</code>来表示 ,除法操作符的结果一定是<code>Number</code>类型，它的操作规则与减法操作符保持一致</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> / <span class="hljs-number">1</span>);                 <span class="hljs-comment">//2</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> / <span class="hljs-number">1</span>);               <span class="hljs-comment">//2</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> / <span class="hljs-string">&quot;1&quot;</span>);             <span class="hljs-comment">//2</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> / <span class="hljs-literal">true</span>);            <span class="hljs-comment">//2</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> / <span class="hljs-literal">false</span>);             <span class="hljs-comment">//Infinity</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> / <span class="hljs-literal">null</span>);              <span class="hljs-comment">//Infinity</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> / <span class="hljs-literal">undefined</span>);         <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> / <span class="hljs-literal">NaN</span>);               <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">null</span> / <span class="hljs-literal">true</span>);           <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;a&quot;</span> / <span class="hljs-number">1</span>);               <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;a&quot;</span> / <span class="hljs-string">&quot;b&quot;</span>);             <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> / <span class="hljs-number">1</span>);                <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> / <span class="hljs-literal">NaN</span>);              <span class="hljs-comment">//NaN</span><br></code></pre></td></tr></table></figure>

<p><strong>操作原则</strong></p>
<ol>
<li>除法操作符得到的结果一定是<code>Number</code>类型</li>
<li><code>NaN</code>与任何数相除都是<code>NaN</code></li>
<li>如果执行除法的不是数字，则通过<code>Number</code>去转换一次</li>
<li>如果除数为0，则最终的结果为<code>Infinity</code>无穷大</li>
</ol>
<h3 id="6-6取余操作符"><a href="#6-6取余操作符" class="headerlink" title="6.6取余操作符"></a>6.6取余操作符</h3><p>取余操作符是针对两个数相除以后取余数，使用<code>%</code>来表示，它的结果一定是Number类型，<strong>遵守减法操作规则</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> % <span class="hljs-number">1</span>);                 <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> % <span class="hljs-number">1</span>);               <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> % <span class="hljs-string">&quot;1&quot;</span>);             <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;2&quot;</span> % <span class="hljs-literal">true</span>);            <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> % <span class="hljs-literal">false</span>);             <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> % <span class="hljs-literal">null</span>);              <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> % <span class="hljs-literal">undefined</span>);         <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span> % <span class="hljs-literal">NaN</span>);               <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">null</span> % <span class="hljs-literal">true</span>);           <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;a&quot;</span> % <span class="hljs-number">1</span>);               <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;a&quot;</span> % <span class="hljs-string">&quot;b&quot;</span>);             <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> % <span class="hljs-number">1</span>);                <span class="hljs-comment">//0</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> % <span class="hljs-literal">NaN</span>);              <span class="hljs-comment">//NaN</span><br></code></pre></td></tr></table></figure>

<p><strong>操作原则</strong></p>
<ol>
<li>取余操作符得到的结果一定是<code>Number</code>类型</li>
<li><code>NaN</code>不参于运算，只要参于运算，结果就是<code>NaN</code></li>
<li>如果执行取余运算的不是数字，则通过<code>Number</code>去转换一次</li>
<li>如果取余的时候除数为0，则结果就是<code>NaN</code></li>
</ol>
<hr>
<h3 id="6-7布尔操作符"><a href="#6-7布尔操作符" class="headerlink" title="6.7布尔操作符"></a>6.7布尔操作符</h3><p>布尔操作符一共有 3 个：非（NOT）、与（AND） 和或（OR）。</p>
<blockquote>
<p>在布尔操作符里面我们经常会涉及到<code>Boolean</code>类型的转换，所以我们一定要知道6个明确的<code>false</code>有哪些？它们分别是<code>0,&quot;&quot;(空字符串),false,NaN,null,undefined</code></p>
</blockquote>
<h4 id="逻辑非操作符"><a href="#逻辑非操作符" class="headerlink" title="逻辑非操作符"></a>逻辑非操作符</h4><p>逻辑非操作符使用的是<code>!</code>来表表示 ，执行的是<strong>非真即假，非假即真</strong>的过程。它的结果一定是一个布尔类型。</p>
<p>我们更在可以用一个简单的例子来说明</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-literal">true</span>;<br><span class="hljs-keyword">var</span> b = !a;				<span class="hljs-comment">//false</span><br><span class="hljs-keyword">var</span> c = !(<span class="hljs-number">1</span>&lt;<span class="hljs-number">2</span>);			<span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>

<p>因为JavaScript是一个<strong>弱类型的语言</strong>，所以在再进行逻辑非的操作的时候，它是任何类型都可以进行操作的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(!<span class="hljs-literal">false</span>);                <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(!<span class="hljs-number">123</span>);                  <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(!<span class="hljs-literal">NaN</span>);                  <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(!<span class="hljs-literal">undefined</span>);            <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(!<span class="hljs-literal">null</span>);                 <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(!<span class="hljs-string">&quot;&quot;</span>);                   <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(!<span class="hljs-number">0</span>);                    <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(!<span class="hljs-string">&quot;hello&quot;</span>);              <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(!!<span class="hljs-string">&quot;abc&quot;</span>);               <span class="hljs-comment">//true</span><br></code></pre></td></tr></table></figure>

<p><strong>操作原则</strong></p>
<ol>
<li>结果一定是布尔类型</li>
<li>非真即假，非假即真</li>
<li>如果操作的这个数不是布尔类型，则通过<code>Boolean</code>去转换</li>
<li>有哪些明确的<code>false</code>一定要弄清楚</li>
</ol>
<h4 id="逻辑与操作符"><a href="#逻辑与操作符" class="headerlink" title="逻辑与操作符"></a>逻辑与操作符</h4><p>逻辑与操作符我们使用的是<code>&amp;&amp;</code>这个符号，执行的是<strong>一假即假</strong>的原则，它的结果不一定是布尔类型</p>
<p>首先我们先通过几个简单的案例来说明还必须况</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-literal">true</span>&amp;&amp;<span class="hljs-literal">false</span>;				<span class="hljs-comment">//false</span><br><span class="hljs-keyword">var</span> b = <span class="hljs-literal">true</span>&amp;&amp;<span class="hljs-literal">true</span>;					<span class="hljs-comment">//true</span><br><span class="hljs-keyword">var</span> c = <span class="hljs-literal">false</span>&amp;&amp;<span class="hljs-literal">false</span>;				<span class="hljs-comment">//false</span><br><span class="hljs-keyword">var</span> d = <span class="hljs-literal">true</span>&amp;&amp;<span class="hljs-literal">false</span>&amp;&amp;<span class="hljs-literal">true</span>;			<span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>

<p>同理，因为JavaScript仍然是一个弱类型的语言，所以在执行与的操作的时候，有可能 并不是布尔类型的值，它可以是任何类型的值，如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> &amp;&amp; <span class="hljs-literal">false</span>);          <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> &amp;&amp; <span class="hljs-number">123</span>);            <span class="hljs-comment">//123</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">false</span> &amp;&amp; <span class="hljs-number">123</span>);           <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> &amp;&amp; <span class="hljs-string">&quot;&quot;</span>);             <span class="hljs-comment">//&quot;&quot;</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> &amp;&amp; <span class="hljs-string">&quot;&quot;</span> &amp;&amp; <span class="hljs-number">123</span>);      <span class="hljs-comment">//&quot;&quot;</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">NaN</span> &amp;&amp; <span class="hljs-literal">false</span>);           <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">NaN</span> &amp;&amp; <span class="hljs-literal">null</span>);            <span class="hljs-comment">//NaN</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">null</span> &amp;&amp; <span class="hljs-string">&quot;abc&quot;</span>);          <span class="hljs-comment">//null</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">123</span> &amp;&amp; <span class="hljs-string">&quot;abc&quot;</span>);           <span class="hljs-comment">//&quot;abc&quot;</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span> &amp;&amp; <span class="hljs-number">123</span>);               <span class="hljs-comment">//0</span><br></code></pre></td></tr></table></figure>

<p><strong>操作原则</strong></p>
<ol>
<li>它的结果不一定是Boolean类型</li>
<li>“一假即假”的操作</li>
<li>短路原则：当一个表达式如果已经能够得到结果了，就不会再向后面继续去运算了</li>
<li>非布尔类型的值在进行运算的时候，需要通过Boolean去测试它</li>
<li>有哪些明确的false条件</li>
</ol>
<h4 id="逻辑或操作符"><a href="#逻辑或操作符" class="headerlink" title="逻辑或操作符"></a>逻辑或操作符</h4><p>逻辑或的操作符使用<code>||</code>来表示 ，执行<strong>一真即真</strong>的操作，它的结果不一定是布尔类型</p>
<p>我们还是先通几个简单的案例来说明情况</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-literal">true</span>||<span class="hljs-literal">false</span>;				<span class="hljs-comment">//true</span><br><span class="hljs-keyword">var</span> b = <span class="hljs-literal">true</span>||<span class="hljs-literal">true</span>;					<span class="hljs-comment">//true</span><br><span class="hljs-keyword">var</span> c = <span class="hljs-literal">false</span>||<span class="hljs-literal">false</span>;				<span class="hljs-comment">//false</span><br><span class="hljs-keyword">var</span> d = <span class="hljs-literal">true</span>||<span class="hljs-literal">false</span>||<span class="hljs-literal">true</span>;			<span class="hljs-comment">//true</span><br></code></pre></td></tr></table></figure>

<p>同理，因为JavaScript仍然是一个弱类型的语言，所以在执行与的操作的时候，有可能 并不是布尔类型的值，它可以是任何类型的值，如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> || <span class="hljs-number">123</span> || <span class="hljs-literal">false</span>);         <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">false</span> || <span class="hljs-number">123</span> || <span class="hljs-literal">false</span>);        <span class="hljs-comment">//123</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">666</span> || <span class="hljs-literal">true</span> || <span class="hljs-string">&quot;hello&quot;</span>);       <span class="hljs-comment">//666</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">NaN</span> || <span class="hljs-literal">false</span> || <span class="hljs-literal">null</span>);         <span class="hljs-comment">//null</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">null</span> || <span class="hljs-string">&quot;world&quot;</span>);              <span class="hljs-comment">//&quot;world&quot;</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">false</span> || <span class="hljs-literal">NaN</span>);                 <span class="hljs-comment">//NaN</span><br></code></pre></td></tr></table></figure>

<p><strong>操作原则</strong></p>
<ol>
<li>结果不一定是布尔类型</li>
<li>执行“一真即真”的操作</li>
<li>短路原则：如果表达式已经能够得到结果，则不会继续向后面运算</li>
<li>如果操作的数不是布尔类型则通过Boolean去测试</li>
<li>要弄清楚明确的false条件有哪些</li>
</ol>
<p>逻辑与，或，非都称之为布尔操作符，在工作当中我们有时候会将这个结操作符结合起一起使用，这个时候怎么办呢？</p>
<p>:book: <strong>案例</strong>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> || <span class="hljs-string">&quot;&quot;</span> &amp;&amp; <span class="hljs-literal">NaN</span>);             <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">123</span> || !<span class="hljs-string">&quot;&quot;</span> || <span class="hljs-literal">false</span>);           <span class="hljs-comment">//123</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">123</span> &amp;&amp; <span class="hljs-literal">NaN</span> || <span class="hljs-literal">null</span>);            <span class="hljs-comment">//null</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;abc&quot;</span> || <span class="hljs-number">123</span> &amp;&amp; <span class="hljs-literal">NaN</span>);           <span class="hljs-comment">//&quot;abc&quot;</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">null</span> || <span class="hljs-number">123</span> &amp;&amp; <span class="hljs-literal">undefined</span>);      <span class="hljs-comment">//undefined</span><br></code></pre></td></tr></table></figure>

<p><strong>操作原则</strong></p>
<ol>
<li>或：一真即真； 与：一假即假；非：非真即假，真假即真</li>
<li>先非，再与，最后或</li>
<li>非布尔类型的调用<code>Boolean</code>去测试</li>
<li>弄清楚明确的<code>false</code>条件有哪些</li>
<li>短路原则</li>
</ol>
<hr>
<h3 id="6-8相等操作符"><a href="#6-8相等操作符" class="headerlink" title="6.8相等操作符"></a>6.8相等操作符</h3><p>JavaScript里面的相等操作符与之前其它的语言里面的相等操作符完全不一样，因为JavaScript是一个弱类型的语言，有判断的时候符号两边可能会发<strong>类型转换</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> == <span class="hljs-number">2</span>);				<span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> == <span class="hljs-number">1</span>);				<span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> == <span class="hljs-literal">true</span>);				<span class="hljs-comment">//true 第四条原则 </span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span> == <span class="hljs-literal">false</span>);			<span class="hljs-comment">//true 第四条原则 </span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;0&quot;</span> == <span class="hljs-literal">false</span>);			<span class="hljs-comment">//true 先适用于第四条，再适用于第三条</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;10&quot;</span> == <span class="hljs-number">10</span>);			<span class="hljs-comment">//true 第三条原则</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> == <span class="hljs-number">0</span>);				<span class="hljs-comment">//true 第三条原则</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">NaN</span> == <span class="hljs-number">0</span>);				<span class="hljs-comment">//false  第二条原则 </span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">NaN</span> == <span class="hljs-literal">NaN</span>);			<span class="hljs-comment">//false  第二条原则 </span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">null</span> == <span class="hljs-literal">undefined</span>);		<span class="hljs-comment">//true   第一条原则</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> == <span class="hljs-literal">null</span>);			<span class="hljs-comment">//false  第一条原则 </span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span> == <span class="hljs-literal">undefined</span>);		<span class="hljs-comment">//false  第一条原则</span><br></code></pre></td></tr></table></figure>

<p><img src="D:\学习相关\软帝\JavaScript\8-9\笔记\JavaScript运算符.assets\image-20210809101219311.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210809101219311"></p>
<p><strong>操作原则</strong></p>
<ol>
<li><code>null</code>与<code>undefined</code>可以相等，也可以与自身相等，除此之外，与任何值都不相等</li>
<li><code>NaN</code>不参于运算，也不参于比较，只要比较就是<code>false</code></li>
<li>如果一个操作数是字符串，另一个数操作数是数值 ，则数之前的数字符串转换成数值</li>
<li>布尔类型转换成数值，<code>true</code>就是1，<code>false</code>就是0</li>
<li>在比较之前，不能对<code>null</code>与<code>undefined</code>转换成任何类型（如果null与undefined参于了比较，它们不做类型转换）</li>
</ol>
<blockquote>
<p><strong>标哥总结</strong>：</p>
<ol>
<li>只要比较的时候没有null,undefined,NaN,并且不全都是字符串，其它情况一律使用Number转一下</li>
<li><code>null==undefined</code></li>
<li><code>NaN</code>比较特殊，不参于比较，也不参于运算，(自己都不跟自己相等)</li>
</ol>
</blockquote>
<h3 id="6-9全等操作符"><a href="#6-9全等操作符" class="headerlink" title="6.9全等操作符"></a>6.9全等操作符</h3><p>全等操作符也叫严格相等操作符,<strong>全等操作符是弱类型编程语言里面独有的</strong>，因为在之前的相等操作符里面，我们看到了判断的时候如果类型不相同就会进行类型转换，这个时候如果我们希望操作符左右两边的东西类与数值都相等，应该使用全等来判断</p>
<p>全等操作符使用<code>===</code>来表示，符号的<strong>左右必须类型相同</strong>，数值相同，否则一律为<code>false</code></p>
<pre><code class=" mermaid">graph TD 
A[基本数据类型] --&gt;B(String) 
A--&gt;C(Number) 
A--&gt;D(Boolean) 
A--&gt;E(Undefined) 
A--&gt;F(Null)
</code></pre>



<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> === <span class="hljs-number">2</span>);           <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> === <span class="hljs-number">1</span>);           <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> === <span class="hljs-literal">true</span>);        <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span> === <span class="hljs-literal">false</span>);       <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;0&quot;</span> === <span class="hljs-literal">false</span>);     <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;10&quot;</span> === <span class="hljs-number">10</span>);       <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> === <span class="hljs-number">0</span>);          <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">NaN</span> === <span class="hljs-number">0</span>);         <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">NaN</span> === <span class="hljs-literal">NaN</span>);       <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">null</span> === <span class="hljs-literal">undefined</span>);<span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&quot;</span> === <span class="hljs-literal">null</span>);       <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span> === <span class="hljs-literal">undefined</span>);   <span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>

<p><strong>操作原则</strong></p>
<ol>
<li>符号两边的数据类型一定要相同</li>
<li>符号两边的值一定要相等</li>
<li><code>NaN</code>不与任何值相等</li>
</ol>
<h3 id="6-10不相等操作符"><a href="#6-10不相等操作符" class="headerlink" title="6.10不相等操作符"></a>6.10不相等操作符</h3><p>不相等操作符主要使用的是<code>!=</code>或<code>!==</code>，它其实就是在相等操作符上面的结果里面取反就可以了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">10</span> != <span class="hljs-number">10</span>);						<span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">10</span> != <span class="hljs-string">&quot;10&quot;</span>);					<span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">10</span> !== <span class="hljs-string">&quot;10&quot;</span>);					<span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">null</span> != <span class="hljs-literal">undefined</span>);				<span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">null</span> !== <span class="hljs-string">&quot;undefined&quot;</span>);			<span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">NaN</span> != <span class="hljs-literal">NaN</span>);					<span class="hljs-comment">//true</span><br></code></pre></td></tr></table></figure>

<h3 id="6-11关系操作符"><a href="#6-11关系操作符" class="headerlink" title="6.11关系操作符"></a>6.11关系操作符</h3><p>小于（&lt;）、大于（&gt;）、小于等于（&lt;=）和大于等于（&gt;=）这几个关系操作符用于对两个值进行比 较，比较的规则与我们在数学课上所学的一样。<strong>这几个操作符都返回一个布尔值</strong>，如下面的例子所示：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> result1 = <span class="hljs-number">5</span> &gt; <span class="hljs-number">3</span>;			<span class="hljs-comment">//true</span><br><span class="hljs-keyword">var</span> result2 = <span class="hljs-number">5</span> &lt; <span class="hljs-number">3</span>;			<span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>

<p>JavaScript是一个弱类型语言，所以在进行关系比较较的时候，它符号左右两边的数据类型可能 会不相同，也可能不是数字在进行比较，在JS里面任何数据类型都是可以做关系比较</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">100</span> &lt; <span class="hljs-number">99</span>);          <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;1&quot;</span> &lt; <span class="hljs-number">2</span>);           <span class="hljs-comment">//true 第二条原则</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;1&quot;</span> &lt; <span class="hljs-string">&quot;2&quot;</span>);         <span class="hljs-comment">//true 第四条原则     </span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;11&quot;</span> &lt; <span class="hljs-string">&quot;2&quot;</span>);        <span class="hljs-comment">//true 第四条原则 </span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> &lt; <span class="hljs-number">2</span>);          <span class="hljs-comment">//true 第二条原则</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-literal">true</span> &lt; <span class="hljs-string">&quot;2&quot;</span>);		<span class="hljs-comment">//true 先适用第三条规则 ，再适用第二条规则</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;blue&quot;</span> &lt; <span class="hljs-string">&quot;action&quot;</span>); <span class="hljs-comment">//false 第四条原则</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;aa&quot;</span> &lt; <span class="hljs-string">&quot;ab&quot;</span>);       <span class="hljs-comment">//true  第四条原则</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;A&quot;</span> &lt; <span class="hljs-string">&quot;a&quot;</span>);         <span class="hljs-comment">//true  第四条原则</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我&quot;</span> &gt; <span class="hljs-string">&quot;你&quot;</span>);		   <span class="hljs-comment">//true  第五条原则</span><br></code></pre></td></tr></table></figure>

<p><strong>操作原则</strong></p>
<ol>
<li><p>如果两个数是数值，则直接比较数值大小</p>
</li>
<li><p>如果一个操作数是数值 ，另一个不是数值，则将另一个数通过<code>Number</code>转换成数值以后再比较(NaN参与比较都为false)</p>
</li>
<li><p>如果有个操作数是布尔值 ，则先将布尔值转换成数值再比较</p>
</li>
<li><p>如果两个操作数都是字符串，则比较两个字串所对应的编码值（ASCII码）</p>
<p>ASCII码指的是计算机通用信息编码，它将我们所有的字母都使用一个数字编码来表示 ，同时也将我们的数字使用了编码来表示</p>
</li>
<li><p>如果是中文比较，则比较的是<code>unicode</code>码</p>
<p>使用<code>charCodeAt(0)</code>可以查看Unicode编码值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a=<span class="hljs-string">&quot;我&quot;</span>;<br><span class="hljs-built_in">console</span>.log(a.charCodeAt(<span class="hljs-number">0</span>));<br></code></pre></td></tr></table></figure>

</li>
</ol>
<p><img src="https://pic.imgdb.cn/item/61131d7c5132923bf8a08e88.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210809113115420"></p>
<h3 id="6-12条件操作符-三元表达式"><a href="#6-12条件操作符-三元表达式" class="headerlink" title="6.12条件操作符(三元表达式)"></a>6.12条件操作符(三元表达式)</h3><p>条件操作符是根据条件以后来进行赋值。在有些编程语言里面条件操作符也叫三目运算符[三元表达式]。它的基本语法如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = 条件是否成立?条件成立的值:条件不成立的值;<br></code></pre></td></tr></table></figure>

<p>先看两个简单的例子</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-literal">true</span> ? <span class="hljs-string">&quot;标哥&quot;</span> : <span class="hljs-string">&quot;帅哥&quot;</span>;				<span class="hljs-comment">//标哥</span><br><span class="hljs-keyword">var</span> b = <span class="hljs-literal">false</span> ? <span class="hljs-string">&quot;帅气&quot;</span> : <span class="hljs-string">&quot;土豪&quot;</span>;			<span class="hljs-comment">//土豪</span><br><br><span class="hljs-keyword">var</span> c = <span class="hljs-number">1</span> &gt; <span class="hljs-number">2</span> ? <span class="hljs-string">&quot;hello&quot;</span> : <span class="hljs-string">&quot;world&quot;</span>;		   <span class="hljs-comment">//&quot;world&quot;</span><br></code></pre></td></tr></table></figure>

<p>按照正常的编程规范，前面的条件要得到值是一定是一个布尔类型才行。但是JS是一个弱类型的语言，所以前面的条件可能并不一定是的一个布尔值，可能是一其它类型的值，这个时候如果不是布尔类型的，我们就要调用<code>Boolean()</code>去测试一下，所以之前学习的那6个明确的<code>false</code>条件要弄清楚</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> x = <span class="hljs-number">123</span> ? <span class="hljs-string">&quot;你好&quot;</span> : <span class="hljs-string">&quot;大家好&quot;</span>;            <span class="hljs-comment">//你好</span><br><span class="hljs-keyword">var</span> y = <span class="hljs-literal">NaN</span> ? <span class="hljs-string">&quot;你好&quot;</span> : <span class="hljs-string">&quot;大家好&quot;</span>;            <span class="hljs-comment">//大家好</span><br><span class="hljs-keyword">var</span> z = <span class="hljs-number">1</span> &gt; <span class="hljs-literal">null</span> ? <span class="hljs-string">&quot;你好&quot;</span> : <span class="hljs-string">&quot;大家好&quot;</span>;       <span class="hljs-comment">//你好</span><br><span class="hljs-keyword">var</span> m = z ? <span class="hljs-string">&quot;你好&quot;</span> : <span class="hljs-string">&quot;大家好&quot;</span>;              <span class="hljs-comment">//你好</span><br></code></pre></td></tr></table></figure>

<p>条件表达式所使用范围非常广泛，我们可以能完下面的案例来补充一下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">3</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-number">4</span>;<br><span class="hljs-keyword">var</span> max;<br><span class="hljs-comment">//请使用条件表达式，将a,b当中较大的一个值赋值给变量max</span><br>max = a &gt; b ? a : b;<br></code></pre></td></tr></table></figure>

<p>上面的代码就是使用了条件表达式来将较大的一个值赋值给max，我们现在还可以继续深入</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">3</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-number">4</span>;<br><span class="hljs-keyword">var</span> c = <span class="hljs-number">5</span>;<br><span class="hljs-keyword">var</span> max ;<br><span class="hljs-comment">//请使用条件表达式，将a,b,c三个中较大的一个值赋值给max</span><br></code></pre></td></tr></table></figure>

<p><strong>第一种写法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//第一步：先比较a,b两个中较大的一个值</span><br><span class="hljs-keyword">var</span> temp = a &gt; b ? a : b;<br><span class="hljs-comment">//这个时候temp所保存的就a,b中较大的一个值</span><br><span class="hljs-comment">//第二步：再将这个较大的一个值temp与c去比较</span><br><span class="hljs-keyword">var</span> max = temp &gt; c ? temp : c;<br></code></pre></td></tr></table></figure>

<p>上面的两行代码也可以转换成一种写法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> max = (a &gt; b ? a : b) &gt; c ? (a &gt; b ? a : b) : c;<br></code></pre></td></tr></table></figure>

<p><strong>第二种写法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> max = a &gt; b ? (a &gt; c ? a : c) : (b &gt; c ? b : c);<br></code></pre></td></tr></table></figure>

<p><strong>代码分析</strong>：</p>
<ol>
<li>第一步：先判断条件 <code>a&gt;b</code>，如果成立说明a比b要大，再去执行后面的<code>a&gt;c</code>的大小</li>
<li>第二步：如果<code>a&gt;b</code>不成立，说明b要大一些，再将b与c去比较大小</li>
</ol>
<pre><code class=" mermaid">graph TD 
a[a&gt;b] --&gt;|成立| b[a&gt;c] 
b --&gt;|成立| d[a] 
b --&gt;|不成立| e[c] 
a --&gt;|不成立| c[b&gt;c] 
c --&gt;|成立| f[b] 
c --&gt;|不成立| e
</code></pre>

<p><strong>总结</strong>：本质上来说条件运算符就是根据一个条件去执行某些操作</p>
<h3 id="6-13赋值操作符"><a href="#6-13赋值操作符" class="headerlink" title="6.13赋值操作符"></a>6.13赋值操作符</h3><p>赋值操作符使用的是<code>=</code>来表示 ，我们之前已经学过了这个操作符，变量的赋值使用的就是这个。</p>
<p>赋值操作符一定是<strong>将符号右边的值赋值给左边的值</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">123</span>;			<span class="hljs-comment">//这个操作符就是将右边的123赋值给左边的变量a</span><br></code></pre></td></tr></table></figure>

<p>赋值运算符只有唯一的一个注意事项，就是等号左边的值必须是一个定值（在赋值的一瞬间要是一个定值）</p>
<blockquote>
<p>赋值运算符是一个特殊的运算符，它是从右向左来进行，它在进行赋值的时候，<strong>不允许左边的值发生变化</strong></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">10</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-number">1</span>;<br>a = b;			<span class="hljs-comment">//赋值的时候a是一个固定的值，没有发生变化，所以，它不会错，a赋值以后就是1</span><br>a++ = b;		<span class="hljs-comment">//【错误的】b赋值给了a，但是a说我要变化，左边的值没有定</span><br>-a = b;	 		<span class="hljs-comment">//【错误的】，赋值的时候，左边要是一个定值</span><br></code></pre></td></tr></table></figure>

<p>每个主要算术操作符（以及个别的其他操作符）都有对应的<strong>复合赋值操作符</strong>。这些操作符如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">10</span>;<br>a =  a + <span class="hljs-number">5</span>;<br><span class="hljs-comment">//上面的写法可以写成如下形式</span><br>a += <span class="hljs-number">5</span>;<br></code></pre></td></tr></table></figure>

<p>我们可以依次类推，得到下面的几个符号</p>
<ul>
<li>乘/赋值(*=)</li>
<li>除/赋值(/=)</li>
<li>加/赋值(+=)</li>
<li>减/赋值(-=)</li>
<li>模/赋值(%=)</li>
</ul>
<h3 id="6-14逗号操作符"><a href="#6-14逗号操作符" class="headerlink" title="6.14逗号操作符"></a>6.14逗号操作符</h3><p>逗号运算符使用<code>,</code>来表示，这个东西我们之前已经接触过了，就是变量赋值的时候，<strong>逗号代表一个操作没有结束</strong></p>
<blockquote>
<p>逗号操作符目前的应用点并不是很多，只有在变量的赋值里面才会使用到</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a;<br><span class="hljs-keyword">var</span> b;<br><span class="hljs-keyword">var</span> c;<br></code></pre></td></tr></table></figure>

<p>上面通过3行代码定义了3个变量，这个时候会显得比较麻烦，我们每行代码的后面都使用<code>;</code>来结束，代表一行代码完成。这个时候如果我们有了<code>,</code>运算符就可以很方便</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a,b,c;<br></code></pre></td></tr></table></figure>

<p>如果变量去赋值也是一样的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;<br><span class="hljs-keyword">var</span> b = <span class="hljs-number">2</span>;<br><span class="hljs-keyword">var</span> c = <span class="hljs-number">3</span>;<br><br><span class="hljs-comment">//直接使用逗号运算符</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>,b = <span class="hljs-number">2</span>,c = <span class="hljs-number">3</span>;<br></code></pre></td></tr></table></figure>

<p><strong>注意：</strong>逗号运算符返回值问题</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-keyword">var</span> a=<span class="hljs-number">1</span>;<br>	<span class="hljs-keyword">var</span> b=<span class="hljs-number">2</span>;<br>	<span class="hljs-keyword">return</span> a++, b++, <span class="hljs-number">10</span>;    <span class="hljs-comment">//逗号运算符 只返回最右边的值  返回10</span><br>&#125;<br></code></pre></td></tr></table></figure>



<h3 id="6-15位操作符"><a href="#6-15位操作符" class="headerlink" title="6.15位操作符"></a>6.15位操作符</h3><p>位操作符是二进制操作符，它主要是把数据转换成二进制以后再进行操作</p>
<ol>
<li>不同数据类型在内存当中的大小</li>
<li>二进制的原码，补码，反码概念</li>
</ol>
<hr>
<h3 id="运算符重点-优先级"><a href="#运算符重点-优先级" class="headerlink" title="!!!运算符重点-优先级"></a>!!!运算符重点-优先级</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs css">第一步：括号<br>第二步：运算.的操作符<br>第三步：一元操作符<br>第四步：算术操作符<span class="hljs-selector-attr">[先乘除，后加减]</span><br>第五步：关系运算符<br>第六步：相等操作符<br>第七步：布尔操作符<br>最后：赋值操作符 <br></code></pre></td></tr></table></figure>

<p>参考：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">运算符优先级 - JavaScript | MDN (mozilla.org)</a></p>
<h2 id="7-JavaScript语句"><a href="#7-JavaScript语句" class="headerlink" title="7.JavaScript语句"></a>7.JavaScript语句</h2><h3 id="7-1if语句"><a href="#7-1if语句" class="headerlink" title="7.1if语句"></a>7.1if语句</h3><p>if语句也叫条件语句或分支语句，它根据某一个条件去执行相就应的代码，控制代码的流程走向，它使用的关键字是<code>if</code>与<code>else</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">if</span>(条件)&#123;<br>    <span class="hljs-comment">//条件成立的代码</span><br>&#125;<br><span class="hljs-keyword">else</span>&#123;<br>    <span class="hljs-comment">//条件不成立的代码。</span><br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="7-2if…else-if语句"><a href="#7-2if…else-if语句" class="headerlink" title="7.2if…else if语句"></a>7.2if…else if语句</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">if</span>(条件一成立)&#123;<br>    <span class="hljs-comment">//执行条件一的代码</span><br>&#125;<br><span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(条件二成立)&#123;<br>    <span class="hljs-comment">//执行条件二的代码</span><br>&#125;<br><span class="hljs-comment">//这里可能还有很多个条件，省略掉</span><br><span class="hljs-keyword">else</span>&#123;<br>    <span class="hljs-comment">//所有条件都不满足的时候</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p><code>if</code>和<code>else if</code>区别：</p>
<p><code>if</code>：纯if是串行条件，上面满足条件还是会往下判断。</p>
<p><code>else if</code>：并行条件，一个满足即退出判断，即使下面的<code>else if</code>中也满足</p>
<hr>
<h3 id="7-3for循环语句"><a href="#7-3for循环语句" class="headerlink" title="7.3for循环语句"></a>7.3for循环语句</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">for</span>(初始值;循环条件;自变量)&#123;<br>    <span class="hljs-comment">//代码体</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>for循环的本质</strong></p>
<p>通过断点分析，我们发现循环语在在执行的时候，它所循环执行的代码只有三部分</p>
<ol>
<li>判断循环条件是否成立</li>
<li>执行代码体</li>
<li>自变量变化</li>
</ol>
<p>根据循环语句的本质，我们可以画出一个流程图</p>
<p><img src="https://pic.imgdb.cn/item/611324f35132923bf8a9fc6a.png" srcset="/blog/img/loading.gif" lazyload></p>
<h3 id="7-4break与continue"><a href="#7-4break与continue" class="headerlink" title="7.4break与continue"></a>7.4break与continue</h3><p>正常情况下，我们的循环如果在条件不满足的时候会自动的退出，但是在JS里面，我们仍然有两个关键字可以退出循环，这两个关键就是<code>break</code>与 <code>continue</code></p>
<ul>
<li><code>break</code>的意思是中断循环，提前结束循环，后面的语句和剩下的循环都不再做了（半途而废）</li>
<li><code>continue</code>的意思是跳过本次的循环(且不执行continue后面的语句)，继续执行下一次的循环（浪子回头）</li>
</ul>
<h3 id="7-5while循环语句"><a href="#7-5while循环语句" class="headerlink" title="7.5while循环语句"></a>7.5while循环语句</h3><p>while循环语句与for循环的语句的本质是一样的，都是一样<strong>前测试循环语句</strong>，它的语法格式如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">while</span>(循环条件)&#123;<br>     <span class="hljs-comment">//代码体</span><br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="7-6do…while循环语句"><a href="#7-6do…while循环语句" class="headerlink" title="7.6do…while循环语句"></a>7.6do…while循环语句</h3><p>do …while它是一个后测试的循环语句，先执行代码体，再判断循环条件是否成立</p>
<p><strong>语法格式</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//初始值</span><br><span class="hljs-keyword">do</span>&#123;<br>    <span class="hljs-comment">//代码体</span><br>    <span class="hljs-comment">//自变量</span><br>&#125;<span class="hljs-keyword">while</span>(循环条件)<br></code></pre></td></tr></table></figure>

<h3 id="7-7-label语句"><a href="#7-7-label语句" class="headerlink" title="7.7!!! label语句"></a>7.7!!! label语句</h3><p>label语句一般适用于嵌套的循环当中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>; a &lt;= <span class="hljs-number">10</span>; a++) &#123;<br>    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> b = <span class="hljs-number">1</span>; b &lt;= <span class="hljs-number">10</span>; b++) &#123;<br>        <span class="hljs-keyword">if</span> (b == <span class="hljs-number">3</span>) &#123;<br>            <span class="hljs-keyword">break</span>;<br>            <span class="hljs-comment">//这个break到底跳出的是谁</span><br>        &#125;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;这是第&quot;</span> + b + <span class="hljs-string">&quot;项&quot;</span>);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>在上面的代码当中，我们的<code>break</code>根据我们的就近原则，它会跳出内部的循环，所以会打印10次<code>1,2</code>。这个时候如果我们想跳出其它的循环怎么办呢？这个时候就要借用于我们的<code>label</code>语句</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//使用label语句</span><br><span class="hljs-attr">outer</span>: <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>; a &lt;= <span class="hljs-number">10</span>; a++) &#123;<br>    <span class="hljs-attr">inner</span>: <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> b = <span class="hljs-number">1</span>; b &lt;= <span class="hljs-number">10</span>; b++) &#123;<br>        <span class="hljs-keyword">if</span> (b == <span class="hljs-number">3</span>) &#123;<br>            <span class="hljs-keyword">break</span> outer;<br>            <span class="hljs-comment">//这个break到底跳出的是谁</span><br>        &#125;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;这是第&quot;</span> + b + <span class="hljs-string">&quot;项&quot;</span>);<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">//跳出外层循环  1 2</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，我们就给了一个outer的label标签，这个时候我们在<code>break</code>的时候就可以实现中断指定的循环了</p>
</blockquote>
<h3 id="7-8switch语句"><a href="#7-8switch语句" class="headerlink" title="7.8switch语句"></a>7.8switch语句</h3><p>switch语句也叫选择语句，它会选择一个符合的语句去执行，它与我们的if语句关系最为密切</p>
<p>switch要与case结合在一起使用，下面就是switch语句的语句格式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">switch</span>(条件的值)&#123;<br>    <span class="hljs-keyword">case</span> 条件<span class="hljs-number">1</span>:<br>        <span class="hljs-comment">//条件1的代码</span><br>        <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> 条件<span class="hljs-number">2</span>:<br>        <span class="hljs-comment">//条件二的代码</span><br>        <span class="hljs-keyword">break</span>;<br>    <span class="hljs-comment">//这里可能还有很多个case</span><br>    <span class="hljs-keyword">default</span>:<br>        <span class="hljs-comment">//所有的条件都不符合的时候，相当于if语句的最后一个else</span><br>        <span class="hljs-keyword">break</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>注意事项：</strong></p>
<ol>
<li><strong>case条件相同：</strong>出现case中条件相同时，只会进入第一个满足条件的case，不会进入后面满足条件的case中。</li>
<li><strong>case后不加break：</strong>不加break，则程序进入满足条件的case后会继续向下执行，直到遇到case为止。</li>
<li><strong>case的判断方式为<code>===</code>全等</strong>：值要一样而且类型要一样。</li>
</ol>
<h2 id="8-JavaScript函数"><a href="#8-JavaScript函数" class="headerlink" title="8.JavaScript函数"></a>8.JavaScript函数</h2><p>函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、 任何时候<strong>调用执行</strong>。ECMAScript 中的函数使用 function 关键字来声明，后跟一组参数以及函数体</p>
<blockquote>
<p>函数就是方法，在面向对象里面函数就是方法，在面向过程的语言里面，函数叫函数。在JS里面，你可以认为函数与方法就是一个东西</p>
</blockquote>
<h3 id="8-1函数的定义"><a href="#8-1函数的定义" class="headerlink" title="8.1函数的定义"></a>8.1函数的定义</h3><p>函数的定义使用关键字<code>function</code>来定义，它的语法格式如下</p>
<p><strong>第一种定义方式</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> 函数名(<span class="hljs-params">参数...?</span>)</span>&#123;<br>    <span class="hljs-comment">//函数的代码体</span><br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>注意事项：</p>
<ol>
<li>函数名也算是标签符，所以在命名的时候也要规范（它的命名规范与我们之前的变量的命名规范是一样的）</li>
<li>函数的代码体可以是任何多条语句</li>
<li>函数的参数在语法里面可以根据实际情况来决定，可以设置，也可以不设置</li>
<li>函数的花括号一定不能省略，函数的花括号是带有作用域的</li>
</ol>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;*******************************&quot;</span>);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;大家好，我叫杨标&quot;</span>);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;*******************************&quot;</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p>上面我们就已经定义好了一个函数，定义好了以后，我们就可以在这个地方调用执行了</p>
<p><strong>第二种定义方式</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> 函数名 = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">参数...?</span>)</span>&#123;<br>    <span class="hljs-comment">//函数代码体</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>这一种定义方式其实就是把一个函数赋值给了一个变量</p>
<p>根据上面的语法格式，我们可以得到如下代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> sayHello = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;*******************************&quot;</span>);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;大家好，我叫杨标&quot;</span>);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;*******************************&quot;</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>两种函数定义方式的区别</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript">abc();      <span class="hljs-comment">//不会报错</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;abc&quot;</span>);<br>&#125;<br><br><span class="hljs-comment">// def();      //调用这个方法会报错 def is not a function</span><br><span class="hljs-keyword">var</span> def = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;def&quot;</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>通过<code>function</code>定义的函数可以在任何地方调用执行，而通过<code>var</code>的方法定义的函数<code>def</code>则不能在定义之前调用，只能在定义之后调用（原因：执行上下文 execute context）</p>
</blockquote>
<h3 id="8-2函数的检测"><a href="#8-2函数的检测" class="headerlink" title="8.2函数的检测"></a>8.2函数的检测</h3><p>函数其实也可以看成是一个变量，所以它可以通过变量类型检测的关键字<code>typeof</code>来检测一下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> sayHello = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>&#125;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>) </span>&#123;<br>&#125;<br><span class="hljs-comment">//这个时候的sayHello就是一个函数类型</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span> sayHello);			<span class="hljs-comment">//&quot;function&quot;</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span> abc);				<span class="hljs-comment">//&quot;function&quot;</span><br></code></pre></td></tr></table></figure>

<h3 id="8-3函数的调用执行"><a href="#8-3函数的调用执行" class="headerlink" title="8.3函数的调用执行"></a>8.3函数的调用执行</h3><p>函数定义好了以后是不会自己执行，它需要经过调用才会执行（所以函数也叫调用执行）</p>
<p>函数的调用方法是通过函数名+<code>()</code>来完成的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;*******************************&quot;</span>);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;大家好，我叫杨标&quot;</span>);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;*******************************&quot;</span>);<br>&#125;<br><span class="hljs-comment">//上面的函数是sayHello,所以如果要调用应该通过下面的方法</span><br>sayHello();			<span class="hljs-comment">//调用一次就执行一次</span><br></code></pre></td></tr></table></figure>

<hr>
<h3 id="8-4形参与实参"><a href="#8-4形参与实参" class="headerlink" title="8.4形参与实参"></a>8.4形参与实参</h3><p><strong>形参</strong>：形式参数，在定义函数的时候括号里面的参数</p>
<p><strong>实参</strong>：实际参数，调用函数时候的括号里面的参数</p>
<p>通俗一点来说，形参就是变量名，实参就是变量的值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sum</span>(<span class="hljs-params">a,b</span>)</span>&#123;   <span class="hljs-comment">//a b为形参</span><br>   	<span class="hljs-keyword">var</span> c = a*a + b*b;<br>    <span class="hljs-built_in">console</span>.log(c);<br>&#125;<br><span class="hljs-keyword">var</span> x = <span class="hljs-number">2</span>,y = <span class="hljs-number">4</span>;<br>sum(x,y);  <span class="hljs-comment">//x,y 为实参</span><br></code></pre></td></tr></table></figure>

<p><strong>注意事项</strong>：</p>
<ol>
<li><p>实参向形参赋值</p>
</li>
<li><p>实参与形参的个数不需要一一对应</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span>(<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(a);<br>    <span class="hljs-built_in">console</span>.log(b);<br>&#125;<br><span class="hljs-comment">//sayHello是有2个形参的，</span><br>sayHello(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>);    <span class="hljs-comment">//1 2</span><br>sayHello(<span class="hljs-string">&quot;11&quot;</span>,<span class="hljs-string">&quot;12&quot;</span>,<span class="hljs-string">&quot;13&quot;</span>);  <span class="hljs-comment">//11 12</span><br>sayHello(<span class="hljs-string">&quot;标哥&quot;</span>);  <span class="hljs-comment">//标哥  undefined</span><br></code></pre></td></tr></table></figure>

</li>
</ol>
<h3 id="8-5函数的重载"><a href="#8-5函数的重载" class="headerlink" title="8.5函数的重载"></a>8.5函数的重载</h3><p><strong>重载</strong>：多个函数的名子相同，它们的参数的类型或参数的个数不相同时，我们就把这些函数叫重载函数，英文叫（overload）</p>
<p>在其它的编程语言里面是有重载的概念的，但是<strong>在JS里面是没有重载的</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span></span>&#123;<br>    <span class="hljs-comment">//第一个方法</span><br>    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">sayHello</span><span class="hljs-params">()</span></span>&#123;<br>        System.out.println(<span class="hljs-string">&quot;大家好&quot;</span>);<br>    &#125;<br>	<span class="hljs-comment">//第二个方法</span><br>    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">sayHello</span><span class="hljs-params">(String userName)</span></span>&#123;<br>        System.out.println(<span class="hljs-string">&quot;大家好，我叫&quot;</span>+userName);<br>    &#125;<br>    <span class="hljs-comment">//第三个方法</span><br>    <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">sayHello</span><span class="hljs-params">(<span class="hljs-keyword">int</span> age)</span></span>&#123;<br>        System.out.println(<span class="hljs-string">&quot;大家好，我今天&quot;</span>+age+<span class="hljs-string">&quot;岁了&quot;</span>);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<p> 上面是我们的 Java代码，我们发现三个函数（方法）它们的方法名相同（都叫<code>sayHello</code>），但是它们的参数的个数或参类型不相同，所以对于这三个方法，我们就叫函数的重载，这三个函数会同时存在</p>
<p><span style="color:red;font-weight:bold;text-decoration:underline dashed blue;font-size:22px">JavaScript是不具备重载的概念的</span></p>
<p><strong>在JavaScript里面</strong>，如果出现了同名的方法，<em>这个时候<strong>后面的方法就覆盖了前面的方法</strong></em>。它没有重载的概念原因是因为它不能通过参数去区分！！！</p>
<p>问题就来了，为什么不能通过参数去区分同名函数？？？</p>
<p><strong>原因一</strong>：因为JS是弱类型语言，形参只一个变量，没有具体的类型，它的类型应该是通过后面赋值决定，所以它不能够通过参数类型来区分</p>
<p><strong>原因二</strong>：在刚刚讲形参与实参的时候我们提到了，形参与实参是没有必要实现一一对应的关系，所以形参的个数也不能去区分同名函数</p>
<p><span style="color:green;text-decoration:red underline wavy;font-weight:bold">所以，它既不能通过参数的类型去区分，也不能通过参数的个数去区分，JS就没有重载，最终是后面的方法覆盖前面的方法</span></p>
<h3 id="8-6函数的返回值"><a href="#8-6函数的返回值" class="headerlink" title="8.6函数的返回值"></a>8.6函数的返回值</h3><p><u>返回值与参数是一个相对的过程</u></p>
<ul>
<li><p>参数：函数是外边赋值给函数里同使用</p>
</li>
<li><p>返回值：函数里面的值拿到函数外边来使用</p>
</li>
</ul>
<p>函数的返回值通过<code>return</code>的关键字来实现，每一个函数都可以设置返回值 ，也可以不设置</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//参数外边给里面</span><br><span class="hljs-comment">//返回值是里面给外边 </span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> x = <span class="hljs-number">100</span>;<br>    <span class="hljs-keyword">return</span> x;<br>&#125;<br><span class="hljs-comment">//我们现在希望在外边拿到这个x应该怎么办？</span><br><span class="hljs-keyword">var</span> a =  abc();		<span class="hljs-comment">//abc()函数运行结束以后，将x返回了出来 ，然后再将返回的x赋值给了a</span><br><span class="hljs-built_in">console</span>.log(a);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>当函数运行结束以后，希望把某个值再重给外边，这个时候我们就可以使用 <code>return</code>将这个值返回到外边去</p>
</blockquote>
<p><code>return</code>一般是写在函数的最后面，当一个函数的内部碰到了<code>return</code>以后，它就停止了，不会再向后面执行了，所以<code>return</code>可以理解为停止函数的运行</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 函数内部一旦碰撞到 return 就会停止 </span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span>);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span>);<br>    <span class="hljs-keyword">return</span>;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">3</span>);<br>&#125;<br>abc();<br></code></pre></td></tr></table></figure>

<blockquote>
<p>上面代码的运行结果就是打印了1，2，不会打印3，因为函数的内部一旦碰到了<code>return</code>就结束了</p>
</blockquote>
<h3 id="8-7函数的本质【重点】"><a href="#8-7函数的本质【重点】" class="headerlink" title="8.7函数的本质【重点】"></a>8.7函数的本质【重点】</h3><p><span style="font-size:32px;font-weight:bold;color:red">本质：</span>函数其实就是为了实现某些功能而存在的，所以我们把函数也叫做方法。既然是方法就拿过来使用;</p>
<pre><code class=" mermaid">graph LR
A[参数]--&gt;|调用|B[函数]--&gt;|返回|C[返回一个结果]
</code></pre>

<h3 id="8-8递归函数"><a href="#8-8递归函数" class="headerlink" title="8.8递归函数"></a>8.8递归函数</h3><p>递归函数也是一个普通函数，只是在函数的内部又调用了自己，这种函数我们叫递归（套娃）</p>
<blockquote>
<p>标哥说：递归一般与循环语句结合得很密切</p>
</blockquote>
<p><strong>案例1：</strong>要求实现1~10之间的打印</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(i);<br>    i++;<br>    <span class="hljs-keyword">if</span> (i &lt;= <span class="hljs-number">10</span>) &#123;<br>        <span class="hljs-comment">// console.log(i);</span><br>        <span class="hljs-comment">// i++;</span><br>        <span class="hljs-comment">//在这一步就形了递归</span><br>        abc();            <br>    &#125;<br>&#125;<br><br>abc();<br></code></pre></td></tr></table></figure>

<p><strong>案例2</strong>：使用递归完成1+2+3+…+10的和</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> sum = <span class="hljs-number">0</span>;<br><span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>) </span>&#123;<br>    sum += i;<br>    i++;<br>    <span class="hljs-keyword">if</span>(i&lt;=<span class="hljs-number">10</span>)&#123;<br>        abc();<br>    &#125;<br>&#125;<br>abc();      <span class="hljs-comment">//调用了刚刚编写的函数</span><br><span class="hljs-built_in">console</span>.log(sum);<br></code></pre></td></tr></table></figure>

<p><strong>案例3：</strong>递归实现斐波那契数列</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//1,1,2,3,5,8,13,21,34......</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params">i</span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (i == <span class="hljs-number">1</span> || i == <span class="hljs-number">2</span>) &#123;<br>        <span class="hljs-comment">// 如果是第1项或第2项，我们就直接返回1</span><br>        <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-comment">//如果不是第1项或第2项，则要</span><br>        <span class="hljs-comment">//用前2项相加</span><br>        <span class="hljs-keyword">var</span> c = abc(i - <span class="hljs-number">1</span>) + abc(i - <span class="hljs-number">2</span>);<br>        <span class="hljs-keyword">return</span> c;<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">var</span> x = abc(<span class="hljs-number">9</span>);<br><span class="hljs-built_in">console</span>.log(x);<br></code></pre></td></tr></table></figure>

<h2 id="9-变量的作用域"><a href="#9-变量的作用域" class="headerlink" title="9.变量的作用域"></a>9.变量的作用域</h2><p>使用<code>var</code>定义的变量没有<strong>块级作用域</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">123</span>;				<span class="hljs-comment">//全局变量</span><br><span class="hljs-keyword">if</span> (<span class="hljs-literal">true</span>) &#123;<br>    <span class="hljs-built_in">console</span>.log(a);<br>&#125;<br><span class="hljs-comment">//--------------------------------</span><br>&#123;<br>    <span class="hljs-keyword">var</span> b = <span class="hljs-number">456</span>;			<span class="hljs-comment">//这里也是全局变量 ，var 没有块级作用域</span><br>&#125;<br><span class="hljs-built_in">console</span>.log(b);<br><span class="hljs-comment">//--------------------------------</span><br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i &lt; <span class="hljs-number">2</span>; i++) &#123;<br>    <span class="hljs-keyword">var</span> c = <span class="hljs-number">789</span>;			<span class="hljs-comment">//这里也是全局变量 ，var 没有块级作用域</span><br>&#125;<br><span class="hljs-built_in">console</span>.log(c);<br><span class="hljs-comment">//-----------------------------------------</span><br><span class="hljs-keyword">if</span> (<span class="hljs-literal">true</span>) &#123;<br>    <span class="hljs-keyword">var</span> d = <span class="hljs-string">&quot;hello&quot;</span>;		<span class="hljs-comment">//这里也是全局变量 ，var 没有块级作用域</span><br>&#125;<br><span class="hljs-built_in">console</span>.log(d);  <span class="hljs-comment">//false时 打印 undefined 不会报错</span><br></code></pre></td></tr></table></figure>

<p>通过上面的几个例子，我们可以发现，if,for,以及单独的花括号，这些都形成不了块级作用域，<strong>这一点与其它的编程语言是完全不一样的</strong></p>
<p>只有一种情况下才会形成作用域，让变量变成一个局部变量，那就是<code>function</code>的关键字</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-keyword">var</span> a = <span class="hljs-string">&quot;hello&quot;</span>;            <span class="hljs-comment">//局部变量</span><br>&#125;<br><span class="hljs-built_in">console</span>.log(a);                 <span class="hljs-comment">//这里就会报错</span><br></code></pre></td></tr></table></figure>

<p><strong>总结</strong>：在<code>var</code>定义的变量里面，<code>function</code>里面的变量叫局部变量，<code>function</code>外边的变量是全局变量</p>
<h2 id="10-JavaScript数组"><a href="#10-JavaScript数组" class="headerlink" title="10.JavaScript数组"></a>10.JavaScript数组</h2><p>数组是大多数编程语言里面都会有东西，不同语言对数组的定义是不一样的，数组它不是一个基本数据类型，它是一个<strong>复杂数据类型</strong>。</p>
<h3 id="10-1数组的概念"><a href="#10-1数组的概念" class="headerlink" title="10.1数组的概念"></a>10.1数组的概念</h3><p>JavaScript与其它的编程语言相比，数组的概念是完全不一样的</p>
<ul>
<li>JavaScript里面的数组概念：一系列数据的集合</li>
<li>其它强类型语言数组的概念：一系列<strong>相同数据类型</strong>的<strong>固定长度</strong>的数据集合</li>
</ul>
<blockquote>
<p>在上面的概念当中，我们就发现JS里面的数组没有限定数据类型必须相同，也没有限定数组的长度是多少</p>
</blockquote>
<h3 id="10-2数组的定义"><a href="#10-2数组的定义" class="headerlink" title="10.2数组的定义"></a>10.2数组的定义</h3><h4 id="通过new-Array-的方式来进行"><a href="#通过new-Array-的方式来进行" class="headerlink" title="通过new Array()的方式来进行"></a>通过<code>new Array()</code>的方式来进行</h4><p><strong>第一种方式</strong>：直接通过<code>new Array()</code>的方式来进行</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>();<br><span class="hljs-comment">//这样就创建了一个空的数组，里面什么都没有，这个数组的长度就为0</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>这里我们使用了一个关键字<code>new</code>，这个关键是后面讲到对象以后再给大家细细的来讲</p>
</blockquote>
<p><strong>第二种方式</strong>：创建数组的时候直接定义数组的长度<code>new Array(arrayLength?:number):[]</code></p>
<p>上面的东西说明，我们可以在定义数组的时候直接就定义数组的长度</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> b = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">6</span>);           <span class="hljs-comment">//这个数组的初始长度是6</span><br></code></pre></td></tr></table></figure>

<p><strong>第三种方式</strong>：直接静态初始化，直接给多个元素值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;d&quot;</span>);<br><span class="hljs-keyword">var</span> arr2 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-literal">true</span>,<span class="hljs-number">1</span>,<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-literal">NaN</span>,<span class="hljs-literal">false</span>,<span class="hljs-string">&quot;123&quot;</span>);<br></code></pre></td></tr></table></figure>

<p>这个时候我们就可以发现，在第二种方法和第三种方法里面，我们在<code>new Array()</code>都可以向里面给参数，但这个给参数的时候一定要注意的特殊情况</p>
<p><strong>注意事项</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//参数为一个number时 就为数组长度</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-string">&quot;2&quot;</span>);		<span class="hljs-comment">//&quot;2&quot;代表的是元素，因为它是字符串类型</span><br><span class="hljs-keyword">var</span> b = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">2</span>);	 	<span class="hljs-comment">//2代表数组长度， 因为它是数组类型</span><br><br><span class="hljs-keyword">var</span> c = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(-<span class="hljs-number">1</span>);		<span class="hljs-comment">//这就会报错，不合法的数组长度</span><br><span class="hljs-keyword">var</span> d = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">3.5</span>);		<span class="hljs-comment">//报错，不会法的数组长度</span><br><br><span class="hljs-keyword">var</span> e = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(-<span class="hljs-number">1</span>,-<span class="hljs-number">2</span>);	<span class="hljs-comment">//静态初始化</span><br></code></pre></td></tr></table></figure>

<p>上面的方式用得少</p>
<h4 id="通过-这一种方式来定义"><a href="#通过-这一种方式来定义" class="headerlink" title="通过[]这一种方式来定义"></a>通过<code>[]</code>这一种方式来定义</h4><p>这一种定义方法叫<strong>字面量定义法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(); <span class="hljs-comment">//定义了一个数组</span><br><span class="hljs-keyword">var</span> b = [];			 <span class="hljs-comment">//这也是一定义了一个空数组</span><br><span class="hljs-keyword">var</span> c = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>]; <span class="hljs-comment">//静态初始化</span><br><span class="hljs-keyword">var</span> d = [-<span class="hljs-number">1</span>];		 <span class="hljs-comment">//静态初始化</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>这一种方式我们经常使用，它直接可以初始化数组里面的元素，但是也有一个缺点，它不能初始化数组的长度</p>
</blockquote>
<p><strong>静态初始化的特殊情况</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = [<span class="hljs-number">1</span>,,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>];		<span class="hljs-comment">//这个数组的长度是多少？  4 第二个值为 empty</span><br><span class="hljs-keyword">var</span> b = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,];		<span class="hljs-comment">//这个数组的长度是多少？  4 第四个值为 empty</span><br></code></pre></td></tr></table></figure>

<h3 id="10-3数组的检测"><a href="#10-3数组的检测" class="headerlink" title="10.3数组的检测"></a>10.3数组的检测</h3><p>在之前学数据类型检测的时候，我们学习了<code>typeof</code>这个关键字，它可以用来做数据类型检测</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>];<br><span class="hljs-keyword">typeof</span> arr;				<span class="hljs-comment">//&quot;object&quot;</span><br></code></pre></td></tr></table></figure>

<p>我们可以看到当通过<code>typeof</code>关键字去检测的时候， 得到的结果是<code>object</code>。这样是不行的，因为<code>object</code>是对象，在JS里面所有的东西其实都是对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> d = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();     <span class="hljs-comment">//得到日期</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span> d);		<span class="hljs-comment">//object</span><br><br><span class="hljs-keyword">var</span> e = <span class="hljs-keyword">new</span> <span class="hljs-built_in">String</span>(<span class="hljs-string">&quot;abc&quot;</span>);<br><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span> e);		<span class="hljs-comment">//object</span><br></code></pre></td></tr></table></figure>

<p><strong>注意</strong>：<code>typeof</code>关键字只适用于基本数据类型的检测，对于复杂数据类型<code>object</code>对象的检测，我们要使用另一个关键字<code>instanceof</code>来完成</p>
<pre><code class=" mermaid">graph TD
A[数据类型检测]--&gt;B[基本数据类型typeof]
A--&gt;C[复杂数据类型instanceof]
</code></pre>

<h4 id="通过instanceof关键字来完成检测"><a href="#通过instanceof关键字来完成检测" class="headerlink" title="通过instanceof关键字来完成检测"></a>通过<code>instanceof</code>关键字来完成检测</h4><p>数组都是通过<code>new Array()</code> 这一种方式来完成的，所以每个数组应该都是<code>Array</code>的实例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>);<br><span class="hljs-comment">//上面的 a是被 Array new出来的，所以下面的代码就一定会成立</span><br><span class="hljs-built_in">console</span>.log(a <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Array</span>);			<span class="hljs-comment">//true</span><br><br><span class="hljs-keyword">var</span> b = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>];  <span class="hljs-comment">//[]相当于new Array()</span><br><span class="hljs-built_in">console</span>.log(b <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Array</span>);			<span class="hljs-comment">//true</span><br></code></pre></td></tr></table></figure>

<p>只要是通过<code>instanceof Array</code>得到的结果为<code>true</code>，那么它就是一个数组</p>
<p>通过上面的代码，我们也可以反推下面的代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>();<br><span class="hljs-keyword">var</span> b = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();<br></code></pre></td></tr></table></figure>

<p>现在我们分别对上面的a,b来做复杂数据类型的检测</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(a <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Array</span>);        <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(a <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Date</span>);         <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(b <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Array</span>);        <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(b <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Date</span>);         <span class="hljs-comment">//true</span><br></code></pre></td></tr></table></figure>

<h4 id="通过Array-isArray-来判断"><a href="#通过Array-isArray-来判断" class="headerlink" title="通过Array.isArray()来判断"></a>通过<code>Array.isArray()</code>来判断</h4><p>这是数组里面提供的一个专门用于检测数组的方法，如果结果为<code>true</code>则说明它是一个数组，否则就不是数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>();<br><span class="hljs-keyword">var</span> b = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>];<br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Array</span>.isArray(a));      <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Array</span>.isArray(b));      <span class="hljs-comment">//true</span><br><span class="hljs-keyword">var</span> c = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()；<br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Array</span>.isArray(c));		<span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>思考：我们为什么要检测数组？</p>
<p>如果一个变量它是数组了，我们就可以按照操作数组的方式去操作它了</p>
</blockquote>
<hr>
<h3 id="10-4-数组的取值与赋值"><a href="#10-4-数组的取值与赋值" class="headerlink" title="10.4 数组的取值与赋值"></a>10.4 数组的取值与赋值</h3><p>数组的取值与赋值都是通过下标（索引）来完成的，索引是从0开始的，通过<code>数组名[索引]</code>这种方式来完成取值与赋值的过程。</p>
<p>数组里面的值也叫数组中的元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> stus = [<span class="hljs-string">&quot;范绪超&quot;</span>, <span class="hljs-string">&quot;李光昊&quot;</span>, <span class="hljs-string">&quot;金星&quot;</span>, <span class="hljs-string">&quot;陈威&quot;</span>, <span class="hljs-string">&quot;龚开&quot;</span>];<br><span class="hljs-comment">//数组里面元素的取值与赋值都是通过下标来完成</span><br><br><span class="hljs-comment">//现在我想取出“金星”这个名子，怎么办呢？</span><br><span class="hljs-keyword">var</span> a = stus[<span class="hljs-number">2</span>];        <span class="hljs-comment">//金星      这就是取值过程</span><br><span class="hljs-comment">//现在想把第1个元素赋值为“标哥”</span><br><span class="hljs-comment">//第一个元素的索引为0</span><br>stus[<span class="hljs-number">0</span>] = <span class="hljs-string">&quot;标哥&quot;</span>;<br><br><span class="hljs-keyword">var</span> b = stus[<span class="hljs-number">5</span>];        <span class="hljs-comment">//不会报错，会得到undefined，但是在强类型C/Java里面会报错</span><br>stus[<span class="hljs-number">10</span>] = <span class="hljs-string">&quot;钱庆龙&quot;</span>;	  <span class="hljs-comment">//不会报错，JS数组的长度没有固定  长度变成11 </span><br><br>stus[<span class="hljs-number">1</span>] = <span class="hljs-literal">true</span>; 		<span class="hljs-comment">//不会报错，JS的数组没有限定数据类型必须相同</span><br></code></pre></td></tr></table></figure>

<hr>
<h3 id="10-5-JS数组与其它语言数组的区别"><a href="#10-5-JS数组与其它语言数组的区别" class="headerlink" title="10.5 JS数组与其它语言数组的区别"></a>10.5 JS数组与其它语言数组的区别</h3><blockquote>
<p>这是重点，不要记混了</p>
</blockquote>
<ol>
<li>JS数组的数据类型可以不用保持一致，而其它强类型语言必须是一样的</li>
<li>JS数组里面的下标是可以越界访问的【越界以后是返回undefined】，但是其它的语言不可以</li>
<li>JS数组的长度是由出现的最大索引决定的，而其它语言是由长度决定了最大索引</li>
</ol>
<p><img src="https://pic.imgdb.cn/item/611ba95d4907e2d39c5af898.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210816143344127"></p>
<h3 id="10-6-数组的简单遍历"><a href="#10-6-数组的简单遍历" class="headerlink" title="10.6 数组的简单遍历"></a>10.6 数组的简单遍历</h3><p>遍历指的是将数组中的每一个都拿出来，走一遍</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> stus = [<span class="hljs-string">&quot;范绪超&quot;</span>, <span class="hljs-string">&quot;李光昊&quot;</span>, <span class="hljs-string">&quot;金星&quot;</span>, <span class="hljs-string">&quot;陈威&quot;</span>, <span class="hljs-string">&quot;龚开&quot;</span>];<br></code></pre></td></tr></table></figure>

<p>在数组里面有一个东西叫<code>length</code>，它是数组对象的属性，用于描述当前数组的长度。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; stus.length; i++) &#123;<br>    <span class="hljs-comment">//i就代表每个元素的索引</span><br>    <span class="hljs-built_in">console</span>.log(stus[i]);<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="10-7数组的常用属性及方法"><a href="#10-7数组的常用属性及方法" class="headerlink" title="10.7数组的常用属性及方法"></a>10.7数组的常用属性及方法</h3><blockquote>
<p>属性：用于描述对象的事物的特征的我们叫属性</p>
<p>方法：在面向对象的概念里面， 方法也叫函数。所以就去可以理解为我们之前所学习的函数</p>
<p>属性是用来描述的，方法是用于来使用的。学习数组里面的属性与方法能够让我们更方便的了解数组，操作数组</p>
</blockquote>
<ol>
<li><p><code>length</code>属性，该属性用于获取 或 设置数组的长度</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;张三&quot;</span>,<span class="hljs-string">&quot;李四&quot;</span>,<span class="hljs-string">&quot;王五&quot;</span>,<span class="hljs-string">&quot;赵六&quot;</span>];<br><span class="hljs-built_in">console</span>.log(arr.length);			<span class="hljs-comment">//得到长度4</span><br>arr.length = <span class="hljs-number">100</span>;					<span class="hljs-comment">//重新设置数组的长度为100</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>push(...items):number</code>方法， 该方法是向数组的最后面追加新的元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;张三&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>];<br><span class="hljs-comment">//希望在数组的最后面追加一个“标哥”</span><br><span class="hljs-keyword">var</span> x = arr.push(<span class="hljs-string">&quot;标哥&quot;</span>);           <span class="hljs-comment">//在arr数组最后追加一个&quot;标哥&quot;,同时返回新的长度x为4</span><br><br><span class="hljs-comment">//同时，我们还可以一次性追加多个元素</span><br><span class="hljs-keyword">var</span> y = arr.push(<span class="hljs-literal">true</span>, <span class="hljs-string">&quot;hello&quot;</span>, <span class="hljs-number">3.14</span>);<br><span class="hljs-comment">//这时候arr同时在后面追加了三个元素，并且返回了数组的新长度y为7</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>pop()</code>方法，从数组的最后移除一个元素，并返回这个移除的元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;张三&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>];<br><br><span class="hljs-keyword">var</span> x = arr.pop();<br><span class="hljs-comment">//这一个时候的数组就会变成[&quot;张三&quot;,&quot;李四&quot;];</span><br><span class="hljs-comment">//x就是移除的这个元素，是&quot;王五&quot;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>unshift(...items):number</code>方法，向当前数组的前面去追加新的元素，<strong>并返回数组的新的长度</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> stus = [<span class="hljs-string">&quot;高远航&quot;</span>, <span class="hljs-string">&quot;吴炂明&quot;</span>, <span class="hljs-string">&quot;张俊辉&quot;</span>, <span class="hljs-string">&quot;陈明洋&quot;</span>];<br><span class="hljs-keyword">var</span> x = stus.unshift(<span class="hljs-string">&quot;标哥&quot;</span>);<br><span class="hljs-comment">//这个时候会向前面追加&quot;标哥&quot;,并将数组新的长度x,x为5</span><br><br><span class="hljs-comment">//同样的，它也可以追加多个元素</span><br><span class="hljs-keyword">var</span> y = stus.unshift(<span class="hljs-literal">true</span>, <span class="hljs-number">123</span>);<br><span class="hljs-comment">//[true, 123,&quot;标哥&quot;,&quot;高远航&quot;, &quot;吴炂明&quot;, &quot;张俊辉&quot;, &quot;陈明洋&quot;];</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>shift()</code>方法，从当前数组的前面去移除第一个元素，并返回这个移除的元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> stus = [<span class="hljs-string">&quot;皮凯特&quot;</span>, <span class="hljs-string">&quot;范绪超&quot;</span>, <span class="hljs-string">&quot;刘豪&quot;</span>];<br><span class="hljs-keyword">var</span> x = stus.shift();<br><span class="hljs-comment">//数组会变为[&quot;范绪超&quot;, &quot;刘豪&quot;],x是移除的元素为&quot;皮凯特&quot;</span><br></code></pre></td></tr></table></figure>

</li>
</ol>
<blockquote>
<p><strong>注意</strong>：上面的4个方法会涉及到数据结构里面的队列与栈的操作。</p>
</blockquote>
<ol start="6">
<li><p><code>concat()</code>方法，将多个数组拼接成一个新的数组，返回这个新的数组，原数组不变</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr1 = [<span class="hljs-string">&quot;成拯&quot;</span>, <span class="hljs-string">&quot;金星&quot;</span>];<br><span class="hljs-keyword">var</span> arr2 = [<span class="hljs-string">&quot;赖语柔&quot;</span>, <span class="hljs-string">&quot;刘紫薇&quot;</span>];<br><span class="hljs-keyword">var</span> arr3 = arr1.concat(arr2);<br><span class="hljs-comment">//把arr1与arr2拼接起来，变成arr3  [&quot;成拯&quot;, &quot;金星&quot;,&quot;赖语柔&quot;, &quot;刘紫薇&quot;]</span><br><br><span class="hljs-comment">//其实数组在拼接的时候，还可以同时拼接多个数组</span><br><span class="hljs-keyword">var</span> arr4 = [<span class="hljs-string">&quot;皮凯特&quot;</span>, <span class="hljs-string">&quot;标哥&quot;</span>];<br><span class="hljs-keyword">var</span> arr5 = arr1.concat(arr2, arr4);<br><span class="hljs-comment">//这个时候将arr1,arr2,arr4一起拼接，并成形成arr5</span><br><span class="hljs-comment">//[&quot;成拯&quot;, &quot;金星&quot;,&quot;赖语柔&quot;, &quot;刘紫薇&quot;,&quot;皮凯特&quot;, &quot;标哥&quot;]</span><br></code></pre></td></tr></table></figure>

<p>上面的数组拼接，其实还有另一种写法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr1 = [<span class="hljs-string">&quot;成拯&quot;</span>, <span class="hljs-string">&quot;金星&quot;</span>];<br><span class="hljs-keyword">var</span> arr2 = [<span class="hljs-string">&quot;赖语柔&quot;</span>, <span class="hljs-string">&quot;刘紫薇&quot;</span>];<br><span class="hljs-keyword">var</span> arr3 = [<span class="hljs-string">&quot;皮凯特&quot;</span>, <span class="hljs-string">&quot;标哥&quot;</span>];<br><span class="hljs-comment">//现在如果希望将这三个数组拼在一起</span><br><br><span class="hljs-comment">/*</span><br><span class="hljs-comment">    var temp = arr1.concat(arr2);</span><br><span class="hljs-comment">    //[&quot;成拯&quot;, &quot;金星&quot;,&quot;赖语柔&quot;, &quot;刘紫薇&quot;] arr1与arr2的结合</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">    var result = temp.concat(arr3);</span><br><span class="hljs-comment">    //[&quot;成拯&quot;, &quot;金星&quot;,&quot;赖语柔&quot;, &quot;刘紫薇&quot;,&quot;皮凯特&quot;, &quot;标哥&quot;];</span><br><span class="hljs-comment">*/</span><br><span class="hljs-comment">//这种写法叫链式语法</span><br><span class="hljs-keyword">var</span> result = arr1.concat(arr2).concat(arr3);<br><span class="hljs-comment">//相当于</span><br><span class="hljs-keyword">var</span> result1 = arr1.concat(arr2,arr3);<br></code></pre></td></tr></table></figure>

<p><strong>小技巧</strong>：我们可以通过<code>concat</code>这个方法来实现数组的复制</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr1 = [<span class="hljs-string">&quot;张三&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>];<br><span class="hljs-comment">//如果想复制相同的数组，怎么办？</span><br><span class="hljs-keyword">var</span> arr2 = arr1;<br></code></pre></td></tr></table></figure>

<p>像上面这种方式的复制数组是有问题的，因为这种复制叫<strong>浅拷贝</strong>，两个数组会相互影响</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">arr1[<span class="hljs-number">0</span>]=<span class="hljs-string">&quot;标哥&quot;</span>;<br><span class="hljs-built_in">console</span>.log(arr2[<span class="hljs-number">0</span>]);		<span class="hljs-comment">//&quot;标哥&quot;;</span><br></code></pre></td></tr></table></figure>

<p>这个时候我们看到2个数组相互影响了。所以我们不能像上面这种方式来复制数组</p>
<p><strong>可以通过<code>concat</code>来完成</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr1 = [<span class="hljs-string">&quot;张三&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>];<br><span class="hljs-comment">//如果想复制相同的数组，怎么办？</span><br><span class="hljs-keyword">var</span> arr2 = arr1.concat();			<span class="hljs-comment">//这个时候返回了新的数组，两个数组之前互不影响</span><br><span class="hljs-comment">//现在再来改变里面的元素值</span><br>arr1[<span class="hljs-number">0</span>] = <span class="hljs-string">&quot;刘紫薇&quot;</span>;<br><span class="hljs-built_in">console</span>.log(arr2);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>slice(start?:number,end?:number):[]</code>方法，该方法是从数组的<strong>start位置开始</strong>，到<strong>end位置结束</strong> ，截取里面的元素，形成一个新的数组，原数组不变</p>
<p>在截取的时候，包含开始，不包含结束**[开始,结束)**</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;d&quot;</span>, <span class="hljs-string">&quot;e&quot;</span>, <span class="hljs-string">&quot;f&quot;</span>, <span class="hljs-string">&quot;g&quot;</span>];<br><span class="hljs-keyword">var</span> arr1 = arr.slice(<span class="hljs-number">2</span>, <span class="hljs-number">5</span>); <br><span class="hljs-comment">//[&quot;c&quot;,&quot;d&quot;,&quot;e&quot;];</span><br><br><span class="hljs-keyword">var</span> arr2 = arr.slice(<span class="hljs-number">1</span>);<br><span class="hljs-comment">//[&quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;e&quot;, &quot;f&quot;, &quot;g&quot;]</span><br><span class="hljs-comment">//这里的&quot;1&quot;代表开始截取的位置，结束的位置省略了，就会一直到数组的最后</span><br><br><span class="hljs-keyword">var</span> arr3 = arr.slice();<br><span class="hljs-comment">//[&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;e&quot;, &quot;f&quot;, &quot;g&quot;]</span><br><span class="hljs-comment">//这里省略了开始位置，也省略了结束位置，这样就会从开始一直截取到最后</span><br><span class="hljs-comment">//我们也可以通过一个像这样的方法来实现数组的复制</span><br><br><span class="hljs-keyword">var</span> arr4 = arr.slice(<span class="hljs-number">1</span>, -<span class="hljs-number">1</span>);<br><span class="hljs-comment">//[&quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;e&quot;, &quot;f&quot;]</span><br><span class="hljs-comment">//1代表开始位置，-1代表结束位置，对于负数，我们可以倒着数</span><br><br><span class="hljs-keyword">var</span> arr5 = arr.slice(-<span class="hljs-number">3</span>, -<span class="hljs-number">1</span>);<br><span class="hljs-comment">//[&quot;e&quot;,&quot;f&quot;]</span><br></code></pre></td></tr></table></figure>

<p>下面和几种<strong>特殊情况</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr6 = arr.slice(<span class="hljs-number">3</span>, <span class="hljs-number">1</span>);<br><span class="hljs-comment">//开始索引位置一定要小于结束索引的位置 ,否则结果会是[]空数组</span><br><br><span class="hljs-keyword">var</span> arr7 = arr.slice(<span class="hljs-number">1</span>, <span class="hljs-string">&quot;a&quot;</span>);<br><span class="hljs-comment">//本来应该是Number类型，结果给了个&quot;a&quot;</span><br><span class="hljs-comment">//通过Number(&quot;a&quot;)就是NaN</span><br><span class="hljs-comment">//arr.slice(1,NaN);    最终会得到空数组[]</span><br><br> <span class="hljs-keyword">var</span> arr8 = arr.slice(<span class="hljs-number">1</span>,<span class="hljs-string">&quot;4&quot;</span>);<br><span class="hljs-comment">//本来应该是Number类型，结果给了个&quot;4&quot;</span><br><span class="hljs-comment">//通过Number(&quot;4&quot;)去转换 得到了4</span><br><span class="hljs-comment">//arr.slice(1,4)  得到结果 [&quot;b&quot;, &quot;c&quot;, &quot;d&quot;]</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>reverse():Array</code>方法，该方法主要是将数组里面的元素反转，形成一个新的数组组，原数组也会改变</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;d&quot;</span>, <span class="hljs-string">&quot;e&quot;</span>];<br><span class="hljs-keyword">var</span> arr1  = arr.reverse();<br><span class="hljs-comment">//这个地方的原数组arr与新数组arr1都会变成[&quot;e&quot;, &quot;d&quot;, &quot;c&quot;, &quot;b&quot;, &quot;a&quot;],</span><br><span class="hljs-comment">//新旧数组其实在内在当中是同一个数组,arr改变，arr1也改变</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>toString()</code>方法，将数组里面的元素使用逗号隔开，然后变成字符串</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;张三&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>];<br><span class="hljs-keyword">var</span> str = arr.toString();<br><span class="hljs-comment">//&quot;张三,李四,王五&quot;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>join(separator?:string):string</code>使用指定字符串将数组元素隔开，然后变成字符串</p>
<blockquote>
<p><code>join</code>方法其实就是<code>toString()</code>方法的高级版</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;张三&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>];<br><span class="hljs-keyword">var</span> str1 = arr.join(<span class="hljs-string">&quot;#&quot;</span>);  <span class="hljs-comment">//&quot;张三#李四#王五&quot;</span><br><span class="hljs-keyword">var</span> str2 = arr.join(<span class="hljs-string">&quot;~&quot;</span>);  <span class="hljs-comment">//&quot;张三~李四~王五&quot;</span><br><span class="hljs-keyword">var</span> str3 = arr.join();     <span class="hljs-comment">//相当于toString() &quot;张三,李四,王五&quot;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>splice(start:number,deleteCount:number,...items):Array</code>方法</p>
<p>从指定位置开始，删除指定元素的个数，并且添加新的元素，删除的元素会形成一新的数组</p>
<blockquote>
<p><code>start</code>代表开始删除的位置</p>
<p><code>deleteCount</code>代表删除元素的个数</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;d&quot;</span>, <span class="hljs-string">&quot;e&quot;</span>, <span class="hljs-string">&quot;f&quot;</span>, <span class="hljs-string">&quot;g&quot;</span>];<br><br><span class="hljs-comment">//这个过程可以理解为删除</span><br><span class="hljs-keyword">var</span> arr1 = arr.splice(<span class="hljs-number">4</span>, <span class="hljs-number">2</span>);<br><span class="hljs-comment">//arr的结果 [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;g&quot;]</span><br><span class="hljs-comment">//arr1就是删除元素构成的数组[&quot;e&quot;,&quot;f&quot;]</span><br><br><span class="hljs-comment">//这个过程可以理解为替代 ，删除2个，添加1个</span><br><span class="hljs-keyword">var</span> arr3 = arr.splice(<span class="hljs-number">4</span>, <span class="hljs-number">2</span>, <span class="hljs-string">&quot;标哥&quot;</span>);<br><span class="hljs-comment">//从第索引4开始删，删除2个，再放一个“标哥”进去</span><br><span class="hljs-comment">//arr的结果就是 [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;标哥&quot;, &quot;g&quot;]</span><br><span class="hljs-comment">//arr3还是我们的[&quot;e&quot;,&quot;f&quot;];</span><br><br><span class="hljs-comment">//这个过程可以理解为插入</span><br><span class="hljs-keyword">var</span> arr4 = arr.splice(<span class="hljs-number">4</span>, <span class="hljs-number">0</span>, <span class="hljs-string">&quot;陈子龙&quot;</span>,<span class="hljs-string">&quot;方华升&quot;</span>);<br><span class="hljs-comment">//在索引为4的位置删除0个，再添加一个“陈子龙”</span><br><span class="hljs-comment">//[&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;陈子龙&quot;, &quot;方华升&quot;, &quot;e&quot;, &quot;f&quot;, &quot;g&quot;]</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>这个操作其实就是数据结构的“链”操作。这个方法可以在数组的任何位置插入，删除，替换</p>
</blockquote>
<p><strong>特殊情况</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;d&quot;</span>, <span class="hljs-string">&quot;e&quot;</span>, <span class="hljs-string">&quot;f&quot;</span>, <span class="hljs-string">&quot;g&quot;</span>];<br>arr.splice(<span class="hljs-number">1</span>);	<span class="hljs-comment">//从下标1开始删除后面所有元素</span><br><br>arr.slice(-<span class="hljs-number">2</span>); <span class="hljs-comment">//截取最后两个</span><br><br>arr.slice(<span class="hljs-number">1</span>,-<span class="hljs-number">1</span>); <span class="hljs-comment">//下标1到 倒数第二个 不包含-1</span><br><br>arr.splice(<span class="hljs-number">1</span>,<span class="hljs-string">&quot;a&quot;</span>);  <span class="hljs-comment">//无法删除 返回空数组</span><br><br>arr.splice(<span class="hljs-number">1</span>,<span class="hljs-string">&quot;1&quot;</span>); <span class="hljs-comment">//&quot;1&quot;进行Number转换 删除 下标为1的元素</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>indexOf(searchElement:string|number|boolean,fromIndex?:number):number</code>在数组当中查找某个元素索引值 ，如果找到了就返回穿上索引值，如果没有找到，就返回<code>-1</code></p>
<blockquote>
<p><code>indexOf</code>在执行查找的时候是全等操作，强判断<code>===</code></p>
<p><code>searchElement</code>代表我们要查找的元素，只查找<code>string/number/boolean</code>三种类型，返回第一次出现的索引位置</p>
<p><code>fromIndex</code>从第几个位置开始找</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;11&quot;</span>, <span class="hljs-string">&quot;true&quot;</span>, <span class="hljs-number">11</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">&quot;f&quot;</span>];<br><br><span class="hljs-keyword">var</span> x = arr.indexOf(<span class="hljs-string">&quot;c&quot;</span>);       <span class="hljs-comment">//2</span><br><br><span class="hljs-keyword">var</span> y = arr.indexOf(<span class="hljs-number">11</span>);        <span class="hljs-comment">//5  查询的时候执行全等操作</span><br><br><span class="hljs-keyword">var</span> z = arr.indexOf(<span class="hljs-string">&quot;杨&quot;</span>);      <span class="hljs-comment">//-1  没有找到就是-1</span><br></code></pre></td></tr></table></figure>

<p>在查找的时候，如果发现了多个元素，则永远只会找到第一次出现的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr2 = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-number">11</span>, <span class="hljs-string">&quot;true&quot;</span>, <span class="hljs-literal">false</span>];<br><br><span class="hljs-keyword">var</span> x1 = arr2.indexOf(<span class="hljs-string">&quot;b&quot;</span>);     <span class="hljs-comment">//1 只返回第一次找到的值</span><br></code></pre></td></tr></table></figure>

<p><strong>特殊情况</strong>：正常情况下，查找都是从数组的索引为0的位置开始，但是我们也可以让它从指定的位置开始</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr2 = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-number">11</span>, <span class="hljs-string">&quot;true&quot;</span>, <span class="hljs-literal">false</span>];<br><span class="hljs-keyword">var</span> y1 = arr2.indexOf(<span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-number">2</span>);      <span class="hljs-comment">//4</span><br><span class="hljs-comment">//前面的都忽略，从索引为2的这个位置开始找</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>lastIndexOf(searchElement: string | number | boolean, fromIndex?: number)</code>查找某个元素在数组中的最后一次出现的位置，找到了就返回索引 ，找不到就返回<code>-1</code></p>
<blockquote>
<p><code>lastIndexOf</code>与<code>indexOf</code>的用法是非常相似，都是强判断</p>
<p><code>lastIndex</code>里面的<code>fromIndex</code>其实是<code>endIndex</code>的意思，到这个地方结束，后面的都忽略</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr2 = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-number">11</span>, <span class="hljs-string">&quot;true&quot;</span>, <span class="hljs-literal">false</span>];<br><br><span class="hljs-keyword">var</span> x = arr2.lastIndexOf(<span class="hljs-string">&quot;a&quot;</span>); <span class="hljs-comment">//2</span><br><span class="hljs-comment">//`lastIndex`里面的`fromIndex`其实是`endIndex`的意思，到这个地方结束，后面的都忽略</span><br><span class="hljs-keyword">var</span> y = arr2.lastIndexOf(<span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-number">3</span>); <span class="hljs-comment">//1</span><br></code></pre></td></tr></table></figure>

<hr>
</li>
</ol>
<h2 id="11-函数进阶"><a href="#11-函数进阶" class="headerlink" title="11.函数进阶"></a>11.函数进阶</h2><h3 id="11-1arguments实参数组"><a href="#11-1arguments实参数组" class="headerlink" title="11.1arguments实参数组"></a>11.1arguments实参数组</h3><p>根据上面的理解，<code>arguments</code>是一个实参数组，这个方法所接收到的所以实参都会放在这个对象里面</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(a);<br>    <span class="hljs-built_in">console</span>.log(b);<br>    <span class="hljs-comment">//arguments其实就是一个实参的集合的数组</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>[<span class="hljs-number">2</span>]);  <span class="hljs-comment">//李光昊</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>[<span class="hljs-number">3</span>]);  <span class="hljs-comment">//小倩</span><br>&#125;<br>add(<span class="hljs-string">&quot;标哥&quot;</span>, <span class="hljs-string">&quot;钟宇飞&quot;</span>, <span class="hljs-string">&quot;李光昊&quot;</span>,<span class="hljs-string">&quot;小倩&quot;</span>);<br><span class="hljs-comment">//-----------------------------------------</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params">a,b</span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(a);<br>    <span class="hljs-built_in">console</span>.log(b);<br>    <span class="hljs-comment">//arguments实参集合，我没有给实参，它就没有值</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>);<br>&#125;<br><br>abc();  <br></code></pre></td></tr></table></figure>

<blockquote>
<p>你给了多少个实参，那么你的<code>arguments</code>里面就有多少个元素，如果不给实参，这就是一个空的</p>
</blockquote>
<h3 id="11-2arguments解析"><a href="#11-2arguments解析" class="headerlink" title="11.2arguments解析"></a>11.2arguments解析</h3><p>arguments是数组吗？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>[<span class="hljs-number">0</span>]);  <span class="hljs-comment">//通过索引取值</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>.length);  <span class="hljs-comment">//也可以获取长度</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Array</span>.isArray(<span class="hljs-built_in">arguments</span>));<br>&#125;<br><br>abc(<span class="hljs-string">&quot;hello&quot;</span>, <span class="hljs-string">&quot;方华升&quot;</span>, <span class="hljs-string">&quot;郭磊磊&quot;</span>);<br></code></pre></td></tr></table></figure>

<p><img src="C:\Users\Administrator\Desktop\note\JavaScript函数（二）.assets\image-20210818094205569.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210818094205569"></p>
<p>上面的就是<code>arguments</code>对象，我们可以看到，这个对象它有索引 ，它也有<code>length</code>的长度，所以们习惯的就认为它是一个数组</p>
<p>现在我们就用我们之前学习的数组的检测方式去检测一下，看它是否是一个数组</p>
<p>在这个方法的内部，我们使用<code>Array.isArray(arguments)</code>去检测发现结果是<code>false</code>，说明<code>arguments</code>它并不是一个数组。我们现在将2个东西做一下对比</p>
<table>
<thead>
<tr>
<th><code>arguments</code></th>
<th><code>Array</code></th>
</tr>
</thead>
<tbody><tr>
<td><img src="https://pic.imgdb.cn/item/611d0bb74907e2d39c205b51.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210818094819394"></td>
<td><img src="https://pic.imgdb.cn/item/611d0bdc4907e2d39c20e888.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210818094829421"></td>
</tr>
</tbody></table>
<p>我们将两个对象进行了对比发现有以下几个点</p>
<ul>
<li>左边的<code>arguments</code>是只有索引与长度，而右边的数组不仅有索引 及长度，还具备数组的方法【不同点】</li>
<li>它们都有索引和长度，也都通过索引来取值与赋值，通过<code>length</code>来获取里面元素的个数【相同点】</li>
</ul>
<p><strong>总结</strong>：在<code>JavaScript</code>里面，如果有一个对象具备数组的特征（索引与长度），但是不具备数组操作的那些方法，我们就就反这些对象叫<strong>类数组（伪数组）</strong></p>
<p>所以上面的<code>arguments</code>它就是一个<strong>类数组</strong>，并不是一个真正的数组</p>
<h3 id="11-3立即执行函数"><a href="#11-3立即执行函数" class="headerlink" title="11.3立即执行函数"></a>11.3立即执行函数</h3><ul>
<li><strong>不带参数</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">!<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-keyword">var</span> userName = <span class="hljs-string">&quot;赖雨柔&quot;</span>;<br>    <span class="hljs-built_in">console</span>.log(userName);<br>&#125;();<br></code></pre></td></tr></table></figure>

<p><strong>代码分析</strong>：感叹号是取非的操作符，而取非的操作必须要先得到后面的结果 ，而后面想要得到结果就必须先把函数运行一次，所以这就是立即执行函数</p>
<p>前面的<code>!</code>并不是固定的，可以换成<code>+、-</code>，只要让后边的函数立即执行就可以了</p>
<ul>
<li><strong>带参数的立即执行函数</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">!<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span>(<span class="hljs-params">userName</span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(userName);<br>&#125;(<span class="hljs-string">&quot;颜金堰&quot;</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li><strong>函数表达式的立即执行函数</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> abc = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;   <span class="hljs-comment">//此时的abc 不再是function  而是后面匿名函数的返回值 123</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;陈雅妮&quot;</span>);<br>    <span class="hljs-keyword">return</span> <span class="hljs-number">123</span>;<br>&#125;();<br></code></pre></td></tr></table></figure>

<h3 id="11-4闭包函数"><a href="#11-4闭包函数" class="headerlink" title="11.4闭包函数"></a>11.4闭包函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello world&quot;</span>);<br>&#125;)();<br></code></pre></td></tr></table></figure>

<p>带参数和返回值的闭包</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript">(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params">userName</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(userName);<br>&#125;)(<span class="hljs-string">&quot;郭磊磊&quot;</span>);<br><br><span class="hljs-keyword">var</span> x = (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">def</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;林阴永&quot;</span>;<br>&#125;)();<br></code></pre></td></tr></table></figure>

<h3 id="11-5匿名函数"><a href="#11-5匿名函数" class="headerlink" title="11.5匿名函数"></a>11.5匿名函数</h3><p>立即执行函数和闭包函数，函数的名字可以省略，省略函数名后即为匿名函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript">+ <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;陈威&quot;</span>);<br>&#125;();<br><br><span class="hljs-comment">//如果写成函数表达式</span><br><span class="hljs-keyword">var</span> abc = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;陈威&quot;</span>);<br>    <span class="hljs-keyword">return</span> <span class="hljs-number">123</span>;<br>    <span class="hljs-comment">//这个时候的abc就不是函数名了，是返回值123</span><br>&#125;();<br><br><span class="hljs-comment">//如果写成闭包</span><br>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;   <span class="hljs-comment">//省略函数名</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;陈威&quot;</span>);<br>&#125;)();<br></code></pre></td></tr></table></figure>

<blockquote>
<p>注意：匿名函数只能立即调用，外边调用不了（因为你没有名字了）所以立即执行函数外部无法调用。</p>
</blockquote>
<h3 id="11-6函数调用者以及函数的引用"><a href="#11-6函数调用者以及函数的引用" class="headerlink" title="11.6函数调用者以及函数的引用"></a>11.6函数调用者以及函数的引用</h3><h4 id="11-6-1函数调用者caller"><a href="#11-6-1函数调用者caller" class="headerlink" title="11.6.1函数调用者caller"></a>11.6.1函数调用者caller</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;aaaaa&quot;</span>);<br>    <span class="hljs-comment">// 在a里面调有b</span><br>    b();<br>&#125;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;bbbbb&quot;</span>);<br>    <span class="hljs-built_in">console</span>.log(b.caller);      <span class="hljs-comment">//b.caller就是谁在调用b  函数a</span><br>&#125;<br><br><br>a();			<span class="hljs-comment">//调用了函数a,函数a里面又调用了函数b</span><br>b();			<span class="hljs-comment">//全局调用函数b</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>代码分析</strong>：</p>
<ol>
<li>在上面的代码里面，我们可以看到<code>caller</code> 就是指当前这个函数是被谁调用执行的</li>
<li>在第一次执行b函数的时候是因为被a函数在调用，所以我们可以看<code>b.caller</code>是等于函数a的</li>
<li>第二次执行b函数的时候，我们看到它是在全局调用的，所以<code>b.caller</code>就是<code>null</code></li>
</ol>
<p>一个函数如果是被全局调用，它<code>caller</code>就是<code>null</code>，如果是被其它函数调用，那么它的<code>caller</code>指向调用它的这个函数</p>
</blockquote>
<p><strong>小案例：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;aaaa&quot;</span>);<br>    c();<br>&#125;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;bbbb&quot;</span>);<br>    c();<br>&#125;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">c</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-comment">/*</span><br><span class="hljs-comment">            如果是a调用了我，就打印&quot;hello&quot;</span><br><span class="hljs-comment">            如果是b调用了我，就打印&quot;world&quot;</span><br><span class="hljs-comment">            如果是全局调用了我，就打印你们自己的名子</span><br><span class="hljs-comment">    */</span><br>    <span class="hljs-keyword">if</span> (c.caller == a) &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello&quot;</span>);<br>    &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (c.caller === b) &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;world&quot;</span>);<br>    &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (c.caller == <span class="hljs-literal">null</span>) &#123;   <span class="hljs-comment">//全局调用</span><br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;标哥哥&quot;</span>);<br>    &#125;<br>&#125;<br>a();<br>b();<br>c();<br></code></pre></td></tr></table></figure>

<h4 id="11-6-2函数的引用callee"><a href="#11-6-2函数的引用callee" class="headerlink" title="11.6.2函数的引用callee"></a>11.6.2函数的引用callee</h4><blockquote>
<p>“引用”是第一次接触到这个词，在JavaScript里面，我们可以把引用看成是一个“指针”</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;标哥哥&quot;</span>);<br>    <span class="hljs-comment">// 实参数组对象</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>.callee);<br>&#125;<br>a();<br></code></pre></td></tr></table></figure>

<p>当我们运行上面的函数的时候，我们可以看到<code>arguments.callee</code>其实就是函数a自身，我们同时也看到<code>arguments.callee===a</code>结果为<code>true</code>，这就说明两者是一个东西。这个时候我们就认为<code>arguments.callee</code>就是这个函数a的引用，(引当于是一个函数的指针，指向了当前函数 )</p>
<p><strong>这个东西到底有什么用呢？</strong></p>
<p>匿名函数是没有名的，如果我们想实现匿名函数的递归，就要使用这个东西</p>
<p><strong>案例</strong>：现在需要打印1~10这10个数，用递归实现怎么办呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> count = <span class="hljs-number">1</span>;<br>! <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;  <span class="hljs-comment">//匿名函数</span><br>    <span class="hljs-built_in">console</span>.log(count);<br>    count++;<br>    <span class="hljs-keyword">if</span> (count &lt;= <span class="hljs-number">10</span>) &#123; <br>        <span class="hljs-comment">//这里没有名子了，又要调用自己，怎么办呢？</span><br>        <span class="hljs-comment">//函数内部有一个指针指向了自身，就是arguments.callee</span><br>        <span class="hljs-built_in">arguments</span>.callee();<br>    &#125;<br>&#125;();<br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码当中，写成了匿名函数，同时使用了<code>arguments.callee()</code>来递归执行自己</p>
</blockquote>
<h3 id="11-7回调函数【重点】"><a href="#11-7回调函数【重点】" class="headerlink" title="11.7回调函数【重点】"></a>11.7回调函数【重点】</h3><p>回调函数也叫回调方法，它指的是把函数当成参数传递到另一个函数里面去。</p>
<p>回调函数主要解决问题有3点</p>
<ol>
<li>当一个函数的返回值无法返回的时候</li>
<li>当某些功能需要分段进行的时候（俗称流水线操作）</li>
<li>如果代码希望实现<strong>低耦合</strong></li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//buy这个函数专门负责卖东西的，你不负责吃</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">buy</span>(<span class="hljs-params">callBack</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> food = <span class="hljs-string">&quot;热干面&quot;</span>;<br>    <span class="hljs-keyword">var</span> drink = <span class="hljs-string">&quot;秋天的第一杯奶茶&quot;</span>;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;东西已买完&quot;</span>);<br>    callBack(food, drink);<br>&#125;<br><br><span class="hljs-comment">//钟宇飞只负责质检</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">zhongyufei</span>(<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;钟宇飞在质检&quot;</span> + a);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;钟宇飞在质检&quot;</span> + b);<br>&#125;<br><span class="hljs-comment">//陈欢欢负责吃</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">chenghuanhuan</span>(<span class="hljs-params">a,b</span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;陈欢欢在吃&quot;</span> + a);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;陈欢欢在喝&quot;</span> + b);<br>&#125;<br></code></pre></td></tr></table></figure>

<p>在上面的三个函数里面，<code>buy</code>的函数只负责买，<code>zhongyufei</code>只负责质检，<code>chenghuanhuan</code>就只负责吃，每个函数都只在做独立的事情</p>
<p>如果我们现在希望像流水线一样将上面的三个操作结合在一起怎么办？</p>
<pre><code class=" mermaid">graph LR
A[buy买食品饮料]--&gt;|交给质检|B[钟宇飞检测zhongyufei]
</code></pre>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">buy(zhongyufei);<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/611d1bb14907e2d39c6349ee.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210818152749681"></p>
<p>还有可以是这样的</p>
<pre><code class=" mermaid">graph LR
A[buy买食品饮料]--&gt;|给别人吃|B[陈欢欢吃chenghuanhuan]
</code></pre>

<p><img src="https://pic.imgdb.cn/item/611d1bc74907e2d39c63acf5.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210818152908794"></p>
<p>通过上面的代码，我们可以看到代码变得非常灵活，三个函数各干各的事件，<code>buy</code>的函数只负责买，<code>zhongyufei</code>只负责质检，<code>chenghuanhuan</code>就只负责吃，每个函数都只在做独立的事情。这就符合我们程序员开发的一个要求叫<strong>低耦合</strong></p>
<p><strong>像这种流水线的操作为什么也叫控制反转 ，我们也来看一下</strong></p>
<p><img src="https://pic.imgdb.cn/item/611d1bda4907e2d39c6404e8.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210818153415360"></p>
<p>在<code>buy</code>的函数里面，我们的控制权是在函数里面，一旦进入到回调<code>food,drink</code>两个变量的控制权就反转到外边的回调函数里面去了</p>
<p><span style="color:red"><strong>回调函数还可以实现低耦合</strong></span></p>
<blockquote>
<p>低耦合：指模块 与 模块之间的关系非常浅，最好一个功能由一个模块决定</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">buy</span>(<span class="hljs-params">callBack</span>) </span>&#123;<br>     <span class="hljs-keyword">var</span> food = <span class="hljs-string">&quot;热干面&quot;</span>;<br>     <span class="hljs-keyword">var</span> drink = <span class="hljs-string">&quot;秋天第一杯奶茶&quot;</span>;<br>     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;东西买完了&quot;</span>);<br>     <span class="hljs-comment">//在这里我必须要指定一个人去吃</span><br>     <span class="hljs-comment">//但是现在我还没有想好给谁吃？？</span><br>     <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> callBack == <span class="hljs-string">&quot;function&quot;</span>) &#123;<br>         callBack(food,drink);<br>     &#125;<br> &#125;<br><br><span class="hljs-comment">//标哥哥吃</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">biaogege</span>(<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;标哥在吃&quot;</span> + a);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;标哥在喝&quot;</span> + b);<br>&#125;<br><br><span class="hljs-comment">//钟上宇飞吃</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">zhongyufei</span>(<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;钟宇飞在吃&quot;</span> + a);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;钟宇飞在喝&quot;</span> + b);<br>&#125;<br>buy();      <span class="hljs-comment">//不传参，相当于只买，不吃</span><br>buy(biaogege);  <span class="hljs-comment">//买了，给标哥哥吃</span><br>buy(zhongyufei);    <span class="hljs-comment">//买了，给钟宇飞吃</span><br></code></pre></td></tr></table></figure>

<hr>
<h3 id="11-8回调函数与匿名函数的结合"><a href="#11-8回调函数与匿名函数的结合" class="headerlink" title="11.8回调函数与匿名函数的结合"></a>11.8回调函数与匿名函数的结合</h3><p>回调函数在大多数场景正同都是与匿名函数结合在一起使用，这样更方便一些</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">buy</span>(<span class="hljs-params">callBack</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> a = <span class="hljs-string">&quot;包子&quot;</span>;<br>    <span class="hljs-keyword">var</span> b = <span class="hljs-string">&quot;百事可乐&quot;</span>;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;东西买完了&quot;</span>);<br>    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> callBack == <span class="hljs-string">&quot;function&quot;</span>) &#123;<br>        callBack(a, b);<br>    &#125;<br>&#125;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">biaogege</span>(<span class="hljs-params">x, y</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;标哥哥在吃&quot;</span> + x);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;标哥哥在喝&quot;</span> + y);<br>&#125;<br>buy(biaogege);<br></code></pre></td></tr></table></figure>

<p>直接把函数放在实参的地方，所以我们可以把函数名省略掉，变成一个匿名函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">buy</span>(<span class="hljs-params">callBack</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> a = <span class="hljs-string">&quot;包子&quot;</span>;<br>    <span class="hljs-keyword">var</span> b = <span class="hljs-string">&quot;百事可乐&quot;</span>;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;东西买完了&quot;</span>);<br>    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> callBack == <span class="hljs-string">&quot;function&quot;</span>) &#123;   <span class="hljs-comment">//判断callback有效</span><br>        callBack(a, b);<br>    &#125;<br>&#125;<br><br>buy(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x, y</span>) </span>&#123;    <span class="hljs-comment">//匿名函数</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;标哥哥在吃&quot;</span> + x);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;标哥哥在喝&quot;</span> + y);<br>&#125;);<br><br>buy(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x, y</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;钟宇飞在质检&quot;</span> + x);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;钟宇飞在质检&quot;</span> + y);<br>&#125;)<br></code></pre></td></tr></table></figure>

<h2 id="12-数组高级方法"><a href="#12-数组高级方法" class="headerlink" title="12.数组高级方法"></a>12.数组高级方法</h2><h3 id="12-1迭代方法"><a href="#12-1迭代方法" class="headerlink" title="12.1迭代方法"></a>12.1迭代方法</h3><p>迭代方法也叫遍历方法，它结合回调函数来使用</p>
<p>ECMAScript 5 为数组定义了 5 个迭代方法。每个方法都接收两个参数：<strong>要在每一项上运行的函数和 （可选的）运行该函数的作用域对象——影响 this 的值。</strong>传入这些方法中的函数会接收三个参数：<strong>数组项的值、该项在数组中的位置和数组对象本身</strong>。</p>
<h4 id="12-1-1-forEach方法"><a href="#12-1-1-forEach方法" class="headerlink" title="12.1.1 forEach方法"></a>12.1.1 forEach方法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript">ar arr = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;d&quot;</span>, <span class="hljs-string">&quot;e&quot;</span>];<br><span class="hljs-comment">//forEach本身就是数组array的方法，所以可以直接调用</span><br>arr.forEach(bgg);<br><br><span class="hljs-comment">//回调函数还可以接收三个值</span><br><span class="hljs-comment">//item 代表当前遍历出来的项</span><br><span class="hljs-comment">//index代表这一项索引 </span><br><span class="hljs-comment">//_arr代表你当前正在遍历的这一项</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">bgg</span>(<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>    <span class="hljs-comment">// console.log(item,index);</span><br>    <span class="hljs-comment">//console.log(_arr === arr);</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p><code>forEach</code>的遍历相当于把数组里面的每一项及索引 ，还有正在遍历的这个数组拿出来 ，然后交给回调函数</p>
<p><img src="https://pic.imgdb.cn/item/611da87a4907e2d39cab74bb.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210818165933217"></p>
<p>同样的，上面的函数也可以写成匿名函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;d&quot;</span>, <span class="hljs-string">&quot;e&quot;</span>];<br>arr.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(item, index);<br>&#125;);<br></code></pre></td></tr></table></figure>

<h4 id="12-1-2-map方法"><a href="#12-1-2-map方法" class="headerlink" title="12.1.2 map方法"></a>12.1.2 map方法</h4><p>它也是数组的一个迭代方法，与<code>forEach</code>非常相似，但是这个方法可以接收返回值，它会将回调函数每次的返回值购成一个新的数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr1 = [<span class="hljs-number">10</span>, <span class="hljs-number">20</span>, <span class="hljs-number">30</span>, <span class="hljs-number">40</span>, <span class="hljs-number">50</span>];<br><span class="hljs-comment">// 希望将上面的数组每个元素乘以2，再放到新数组里面</span><br><span class="hljs-keyword">var</span> arr2 = arr1.map(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>    <span class="hljs-comment">// console.log(item);</span><br>    <span class="hljs-keyword">var</span> a = item * <span class="hljs-number">2</span>;<br>    <span class="hljs-keyword">return</span> a;<br>&#125;);<br><span class="hljs-comment">//这个时候的回调函数返回了5次，就有5个值   return 执行五次</span><br><span class="hljs-comment">//map可以把每次回调函数返回的值重新建构成一个新的数组</span><br><span class="hljs-built_in">console</span>.log(arr2);<br></code></pre></td></tr></table></figure>

<p><strong>区别</strong>：<code>map</code>方法与<code>forEach</code>非常相似，只是<code>map</code>可以将回调函数里面每次返回的值重新构建成一个新的数组</p>
<h4 id="12-1-3-filter方法"><a href="#12-1-3-filter方法" class="headerlink" title="12.1.3 filter方法"></a>12.1.3 filter方法</h4><p><code>filter</code>的意思是过滤的意思，它会根据指定的条件，来过滤掉原数组中符合要求的元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr2 = arr.filter(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>    <span class="hljs-comment">//根据一个条件去过滤</span><br>    <span class="hljs-keyword">return</span> item % <span class="hljs-number">2</span> == <span class="hljs-number">0</span>;  <span class="hljs-comment">//为偶数就返回  如果直接return item  则会直接判断item为true还是false</span><br>&#125;);<br><span class="hljs-built_in">console</span>.log(arr2);<br></code></pre></td></tr></table></figure>

<h4 id="12-1-4-some方法"><a href="#12-1-4-some方法" class="headerlink" title="12.1.4 some方法"></a>12.1.4 some方法</h4><p>这个方法相当于一真即真的操作，对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>, <span class="hljs-number">7</span>, <span class="hljs-number">9</span>, <span class="hljs-number">11</span>, <span class="hljs-number">56</span>, <span class="hljs-number">33</span>];<br><span class="hljs-keyword">var</span> flag = arr.some(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> item % <span class="hljs-number">2</span> == <span class="hljs-number">0</span>;    <span class="hljs-comment">//存在一个偶数则返回true</span><br>&#125;);<br><span class="hljs-built_in">console</span>.log(flag);<br><span class="hljs-comment">//[false,false,false,false,false,false,true,false]</span><br><span class="hljs-comment">//它要将所有的结果 做一个 或 运算</span><br><span class="hljs-comment">// 或执行的是一真即真，所以最终的结果 就是true</span><br></code></pre></td></tr></table></figure>

<h4 id="12-1-5-every方法"><a href="#12-1-5-every方法" class="headerlink" title="12.1.5 every方法"></a>12.1.5 every方法</h4><p>这个方法与<code>some</code>本质相同，只是执行了且的操作，并且是一假即假；</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>, <span class="hljs-number">7</span>, <span class="hljs-number">9</span>, <span class="hljs-number">11</span>, <span class="hljs-number">56</span>, <span class="hljs-number">33</span>];<br><span class="hljs-keyword">var</span> flag = arr.every(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> item % <span class="hljs-number">2</span> != <span class="hljs-number">0</span>;     <span class="hljs-comment">//必须要所有为奇数 才返回true  否则返回false</span><br>&#125;);<br><span class="hljs-comment">//回调函数去测试 item%2!=0这个条件</span><br><span class="hljs-comment">//[true,true,true,true,true,true,false,true]</span><br><span class="hljs-comment">//every执行的是且的操作，且是一假即假，所以最终的结果 就是false</span><br><span class="hljs-built_in">console</span>.log(flag);<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/611daa434907e2d39cae7f82.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210818174550967"></p>
<h4 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h4><p>上面的<strong>5个迭代方法</strong>在使用的时候还是要注意一下的，它有几个注意事项</p>
<ol>
<li>不能使用<code>break</code>与<code>continue</code>关键字来中断遍历迭代(因为是在匿名函数中)</li>
<li>所有的迭代方法执行的都是<strong>静态遍历</strong>，也是正向遍历，在最遍历最开始的时候就决定了我要遍历多少次，这个次数最终只能小于或等于原来数组的长度(所以在遍历过程中添加元素，最后遍历不到，但for可以)</li>
<li>正是因为所有的迭代都是静态遍历 ，所以在使用迭代方法的时候最好不要改变原数组的长度【不要对原数组执行新增，删除，替换等操作】</li>
</ol>
<h3 id="12-2归并方法"><a href="#12-2归并方法" class="headerlink" title="12.2归并方法"></a>12.2归并方法</h3><h4 id="reduce方法"><a href="#reduce方法" class="headerlink" title="reduce方法"></a><code>reduce</code>方法</h4><p>它的语法格式如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> result = arr.reduce(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">prev, current, index, _arr</span>) </span>&#123;<br>	<span class="hljs-comment">//代码体</span><br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li><code>prev</code>代表前一个回调函数的返回值【这一次回调函数的返回值会做为下一次回调函数的<code>prev</code>这一个参数来使用】</li>
<li><code>current</code>代表当前遍历的这一项的值</li>
<li><code>index</code>代表当前遍历的这一次的索引 </li>
<li><code>_arr</code>代表当前正在遍历的这个数数组</li>
<li><code>result</code>代表最后一次回调函数的返回值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">10</span>, <span class="hljs-number">20</span>, <span class="hljs-number">30</span>, <span class="hljs-number">40</span>, <span class="hljs-number">50</span>, <span class="hljs-number">60</span>, <span class="hljs-number">70</span>];<br>arr.reduce(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">prev, current, index, _arr</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(prev + <span class="hljs-string">&quot;-------&quot;</span> + current);<br>    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;标哥&quot;</span>;<br>    <span class="hljs-comment">//这一次回调函数的返回值 ，会做为下一次回调函数的参数prev去使用</span><br>&#125;);<br>    <span class="hljs-comment">/*</span><br><span class="hljs-comment">        前一项	    当前项          索引值</span><br><span class="hljs-comment">        prev	    current        index</span><br><span class="hljs-comment">        10	        20              1</span><br><span class="hljs-comment">        标哥	       30              2</span><br><span class="hljs-comment">        标哥	       40              3</span><br><span class="hljs-comment">        标哥	       50              4</span><br><span class="hljs-comment">        标哥	       60              5</span><br><span class="hljs-comment">        标哥	       70              6</span><br><span class="hljs-comment">    */</span><br><span class="hljs-comment">//通过这个例子我们发现，它的遍历是从第2项开始的</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>通过上面的例子得到2点</p>
<ol>
<li>默认情况下，归并方法是从第2项(下标1)开始的</li>
<li>当前回调函数的返回值会做为下一次回调函数的参数<code>prev</code>使用</li>
</ol>
</blockquote>
<p>如果需要归并从下标0开始则需要传递一个默认值：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">10</span>, <span class="hljs-number">20</span>, <span class="hljs-number">30</span>, <span class="hljs-number">40</span>, <span class="hljs-number">50</span>, <span class="hljs-number">60</span>, <span class="hljs-number">70</span>];<br>arr.reduce(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">prev, current, index, _arr</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(prev + <span class="hljs-string">&quot;-------&quot;</span> + current + <span class="hljs-string">&quot;------&quot;</span> + index);<br>    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;标哥&quot;</span>;<br>    <span class="hljs-comment">//这一次回调函数的返回值 ，会做为下一次回调函数的参数prev去使用</span><br>&#125;, <span class="hljs-string">&quot;王奥东&quot;</span>); <span class="hljs-comment">//传递一个默认值</span><br><span class="hljs-comment">//如果我们给了一个基础值，这个基本值就会做为第一次回调函数的prev参数</span><br><br><span class="hljs-comment">/*</span><br><span class="hljs-comment">前一项	  当前项          索引值</span><br><span class="hljs-comment">prev	current        index</span><br><span class="hljs-comment">王奥东	    10         	    0</span><br><span class="hljs-comment">*/</span><br></code></pre></td></tr></table></figure>

<p><strong>场景一：通过<code>reduce</code>来实现数组求和</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">8</span>, <span class="hljs-number">7</span>, <span class="hljs-number">6</span>, <span class="hljs-number">3</span>, <span class="hljs-number">2</span>, <span class="hljs-number">10</span>, <span class="hljs-number">1</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">9</span>];<br><span class="hljs-keyword">var</span> sum = arr.reduce(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">prev, current, index, _arr</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(prev + <span class="hljs-string">&quot;-----&quot;</span> + current);<br>    <span class="hljs-keyword">var</span> sum = prev + current;<br>    <span class="hljs-keyword">return</span> sum;<br>    <span class="hljs-comment">//最后一次的返回值会做为整个reduce的返回值</span><br>&#125;);<br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/611e40994907e2d39c2d040d.png" srcset="/blog/img/loading.gif" lazyload style="zoom:50%;" />

<p><strong>场景二：通过<code>reduce</code>来实现数组求最大数</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">8</span>, <span class="hljs-number">7</span>, <span class="hljs-number">6</span>, <span class="hljs-number">3</span>, <span class="hljs-number">2</span>, <span class="hljs-number">10</span>, <span class="hljs-number">1</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">9</span>];<br><span class="hljs-keyword">var</span> max = arr.reduce(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">prev, current, index, _arr</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> prev &gt; current ? prev : current;<br>&#125;);<br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;最大值：&quot;</span> + max);<br></code></pre></td></tr></table></figure>

<h4 id="reduceRight方法"><a href="#reduceRight方法" class="headerlink" title="reduceRight方法"></a><code>reduceRight</code>方法</h4><p>这上方法与我们的<code>reduce</code>是一样的，只是从右边开始遍历(下标为倒数第二个)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">8</span>, <span class="hljs-number">7</span>, <span class="hljs-number">6</span>, <span class="hljs-number">3</span>, <span class="hljs-number">2</span>, <span class="hljs-number">10</span>, <span class="hljs-number">1</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">9</span>];<br>arr.reduceRight(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">prev, current, index, _arr</span>) </span>&#123;   <span class="hljs-comment">//从8开始</span><br>    <span class="hljs-built_in">console</span>.log(prev + <span class="hljs-string">&quot;--&quot;</span> + current + <span class="hljs-string">&quot;--&quot;</span> + index);<br>&#125;);<br></code></pre></td></tr></table></figure>

<h3 id="12-3排序方法"><a href="#12-3排序方法" class="headerlink" title="12.3排序方法"></a>12.3排序方法</h3><p><code>sort()</code>方法会将当前数组进行排序，<strong>同时返回一个新的数组，新的数组与旧的数组相同</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">5</span>, <span class="hljs-number">7</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">9</span>, <span class="hljs-number">8</span>];<br><span class="hljs-comment">//我们现在希望将空上数组里面的数排序 ，怎么办呢？</span><br>arr.sort();   <span class="hljs-comment">//有返回值 但原数组也会变化</span><br><span class="hljs-comment">// [1, 3, 4, 5, 7, 8, 9]</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码当中，我们直接调用了<code>sort()</code>方法，这个时候将我们的数组按照从小到大的顺序进行了排列</p>
<p><strong>但是上面的方法是有隐患的</strong></p>
<p><img src="https://pic.imgdb.cn/item/611e46064907e2d39c375382.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210819142215046"></p>
<p><code>sort()</code>是以字符串的形式(按ASCII码)在比较，所以会就会有下面的情况产生</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">8</span>, <span class="hljs-number">7</span>, <span class="hljs-number">6</span>, <span class="hljs-number">3</span>, <span class="hljs-number">2</span>, <span class="hljs-number">1</span>, <span class="hljs-number">4</span>, <span class="hljs-number">10</span>, <span class="hljs-number">5</span>, <span class="hljs-number">9</span>];<br>arr.sort();   <span class="hljs-comment">// [1, 10, 2, 3, 4, 5, 6, 7, 8, 9]</span><br></code></pre></td></tr></table></figure>

<p>我们现在不能使用这种默认的方式去做，要使得自己的方法去排序 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//现在希望从小到大排列</span><br>arr.sort(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (a &lt; b) &#123; <br>        <span class="hljs-keyword">return</span> -<span class="hljs-number">1</span>;  <span class="hljs-comment">//如果后面的大 不换位置</span><br>    &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (a === b) &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;<br>    &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (a &gt; b) &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;<br>    &#125;<br>&#125;);<br><span class="hljs-comment">//第1个数要放在第2个数的前面，我们就返回-1</span><br><span class="hljs-comment">//第1个数要放在第2个数的后面，我们就返回1</span><br><span class="hljs-comment">//最终得到的结果就是[1,2,3,4,5,6,7,8,9,10];</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/611e49ea4907e2d39c3f8f45.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210819143307935"></p>
<p><strong>简写上面代码</strong></p>
<figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs arcade">arr.sort(<span class="hljs-function">(<span class="hljs-params">a,b</span>)=&gt;</span>&#123;<br>    <span class="hljs-keyword">return</span> a-b;   <span class="hljs-comment">//升序</span><br>    <span class="hljs-comment">//return b-a;   //降序 从大到小</span><br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="12-4数组方法分类总结"><a href="#12-4数组方法分类总结" class="headerlink" title="12.4数组方法分类总结"></a>12.4数组方法分类总结</h3><pre><code class=" mermaid">graph TD
A[数组的常用方法]--&gt;B[队列方法]
B--&gt;|前面|B1[shift]
B--&gt;|前面|B2[unshift]
A--&gt;C[栈方法]
C--&gt;|后面|C1[push]
C--&gt;|后面|C2[pop]
A--&gt;D[排序方法]
D--&gt;D1[reverse]
D--&gt;D2[sort]
A--&gt;E[位置方法]
E--&gt;E1[indexOf]
E--&gt;E2[lastIndexOf]
A--&gt;F[操作方法]
F--&gt;F1[concat]--&gt;F2[slice]--&gt;F3[splice]
F--&gt;F4[toString]--&gt;F5[join]
A--&gt;G[迭代方法]
A--&gt;H[归并方法]
</code></pre>

<h2 id="13-二维数组"><a href="#13-二维数组" class="headerlink" title="13.二维数组"></a>13.二维数组</h2><ul>
<li>在严格意义上来说，JavaScript没有二维数组的概念，只有多维数组的概念</li>
<li>二维数组指的就是当一个数组中的元素又是数组的时候，我们就把它叫二维数组</li>
</ul>
<h3 id="二维数组的定义"><a href="#二维数组的定义" class="headerlink" title="二维数组的定义"></a>二维数组的定义</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> boys = [<span class="hljs-string">&quot;钟宇飞&quot;</span>, <span class="hljs-string">&quot;张广&quot;</span>, <span class="hljs-string">&quot;王奥东&quot;</span>, <span class="hljs-string">&quot;林兴旺&quot;</span>];<span class="hljs-comment">//将男孩子放在了一个数组</span><br><span class="hljs-keyword">var</span> girls = [<span class="hljs-string">&quot;杨佳琪&quot;</span>, <span class="hljs-string">&quot;郭佳欣&quot;</span>, <span class="hljs-string">&quot;陈雅妮&quot;</span>, <span class="hljs-string">&quot;刘紫薇&quot;</span>];<span class="hljs-comment">//将女孩子也放在一个数组里面</span><br><span class="hljs-keyword">var</span> students = [boys, girls];<span class="hljs-comment">//这个时候的students它就是一个二维数组</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>为什么会存在这个现象是因为我们之前说过，JS的数组中的元素没有类型限定，也没有长度限定</p>
</blockquote>
<p>还可以使用下面的方式定义</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">3</span>);<br><span class="hljs-keyword">var</span> arr2 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">3</span>);<br><span class="hljs-keyword">var</span> arr = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(arr1, arr2);<br></code></pre></td></tr></table></figure>

<p>我们还可以进一步的简化上面的操作</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">3</span>),<span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">3</span>))<br></code></pre></td></tr></table></figure>

<p>继续再向下面推</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-string">&quot;钟宇飞&quot;</span>, <span class="hljs-string">&quot;张广&quot;</span>), <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-string">&quot;杨佳琪&quot;</span>, <span class="hljs-string">&quot;颜金堰&quot;</span>));<br></code></pre></td></tr></table></figure>

<p>继续再向下面推，直接使用字面量的方式来完成更好</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<br>    [<span class="hljs-string">&quot;钟宇飞&quot;</span>, <span class="hljs-string">&quot;张广&quot;</span>],<br>    [<span class="hljs-string">&quot;杨佳琪&quot;</span>, <span class="hljs-string">&quot;颜金堰&quot;</span>]<br>];<br></code></pre></td></tr></table></figure>

<h3 id="二维数组的特殊情况"><a href="#二维数组的特殊情况" class="headerlink" title="二维数组的特殊情况"></a>二维数组的特殊情况</h3><p>首先，一维数组的实现体现我们的数据结构当中的栈，队列以及链表的特点，二维数组的出现就展示出我们数据结构当中表的特点。二维数组是可以很好的去展示平面空间的。</p>
<p>在其它的编程言里面，数组的长度是固定的，类型也是固定的，所以你们可以认为二维数组是一个标准的表的结果 。但是JS的数组有两个特点</p>
<ol>
<li>不限定数据类型</li>
<li>不限定数组长度</li>
</ol>
<p>正是因为有了上面的情况，JS数组在内存当中的体现不是一个标准的表，会有下面的几种特殊情况</p>
<p><strong>第一种特殊情况</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<br>    [<span class="hljs-string">&quot;钟宇飞&quot;</span>, <span class="hljs-string">&quot;张广&quot;</span>, <span class="hljs-string">&quot;季强&quot;</span>, <span class="hljs-string">&quot;王奥东&quot;</span>],<br>    [<span class="hljs-string">&quot;杨佳琪&quot;</span>, <span class="hljs-string">&quot;郭佳欣&quot;</span>, <span class="hljs-string">&quot;陈雅妮&quot;</span>]<br>];<br></code></pre></td></tr></table></figure>

<blockquote>
<p>上面的代码也是合法的，因为JS数组里面不限定数组的长度</p>
</blockquote>
<p><strong>第二种情况</strong></p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<br>    [<span class="hljs-string">&quot;杨佳琪&quot;</span>, <span class="hljs-string">&quot;郭佳欣&quot;</span>, <span class="hljs-string">&quot;陈雅妮&quot;</span>],<br>    <span class="hljs-string">&quot;刘紫薇&quot;</span>,<br>    <span class="hljs-number">19</span><br>]<br></code></pre></td></tr></table></figure>

<blockquote>
<p>上面的代码也是合法的，在JS里面的数组并没有限定元素的类型</p>
</blockquote>
<p><strong>第三种情况</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr =[<br>    [<span class="hljs-string">&quot;杨佳琪&quot;</span>, <span class="hljs-string">&quot;郭佳欣&quot;</span>, <span class="hljs-string">&quot;陈雅妮&quot;</span>],<br>    [<br>        [<span class="hljs-string">&quot;钟宇飞&quot;</span>,<span class="hljs-string">&quot;张广&quot;</span>],<br>        [<span class="hljs-string">&quot;季强&quot;</span>]<br>    ],<br>    <span class="hljs-string">&quot;标哥&quot;</span><br>]<br></code></pre></td></tr></table></figure>

<blockquote>
<p>上面的代码也是合法的，因为没有长度限定，也没有类型限定</p>
</blockquote>
<h3 id="二维数组的取值与赋值"><a href="#二维数组的取值与赋值" class="headerlink" title="二维数组的取值与赋值"></a>二维数组的取值与赋值</h3><p>之前讲一维数组的时候我们都说过了，数组的取值与赋值都是通过下标（索引）来完成的，同理，二维数组也是通过下标来完成的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<br>    [<span class="hljs-string">&quot;杨佳琪&quot;</span>, <span class="hljs-string">&quot;郭佳欣&quot;</span>, <span class="hljs-string">&quot;陈雅妮&quot;</span>,<span class="hljs-string">&quot;韩文君&quot;</span>],<br>    [<span class="hljs-string">&quot;钟宇飞&quot;</span>, <span class="hljs-string">&quot;张广&quot;</span>, <span class="hljs-string">&quot;季强&quot;</span>, <span class="hljs-string">&quot;王奥东&quot;</span>],<br>]<br></code></pre></td></tr></table></figure>

<p>这一个数组在内存当中的表现形式如下</p>
<p><img src="https://pic.imgdb.cn/item/613e1b7944eaada739e165d7.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210819154446454"></p>
<p>二维数组的取值其实可以像表一样的去操作</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> row0 = arr[<span class="hljs-number">0</span>];			<span class="hljs-comment">//这是取到了第一行的数据</span><br><span class="hljs-comment">//这个row0它又是一个数组，现在又可以通过下标去取值</span><br><span class="hljs-keyword">var</span> a1 = row0[<span class="hljs-number">1</span>];			<span class="hljs-comment">//相当于取了第一行的第2列  得到的结果就是郭佳欣</span><br></code></pre></td></tr></table></figure>

<p>上面的操作是一步一步的在操作，现在我们要把这个操作过程换成一步进行</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a1 = arr[<span class="hljs-number">0</span>][<span class="hljs-number">1</span>];			<span class="hljs-comment">//这个时候相当于取第0行每1列，得到结果 郭佳欣</span><br><span class="hljs-keyword">var</span> a2 = arr[<span class="hljs-number">1</span>][<span class="hljs-number">2</span>];			<span class="hljs-comment">//这个时候相当于取第1行第2列，得到结果 季强</span><br></code></pre></td></tr></table></figure>

<p>上面的过程是取值的过程， 赋值的过程也非常简单</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">arr[<span class="hljs-number">1</span>][<span class="hljs-number">3</span>] = <span class="hljs-string">&quot;标哥哥&quot;</span>;<br></code></pre></td></tr></table></figure>

<p>上面是最标准的二维数组的取值 ，其实我们多维也量一样，只一层一层的通过索引去找就可以了</p>
<h3 id="二维数组的应用点"><a href="#二维数组的应用点" class="headerlink" title="二维数组的应用点"></a>二维数组的应用点</h3><p>二维数组所展现出来的量 个表的概念，它用来形容平面空间是最好不过的，例如选座购标，游戏地图等</p>
<p><img src="https://pic.imgdb.cn/item/613e1ba244eaada739e1c811.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210819160048074"></p>
<p>上面的坐位信息是完全可以使用二维数组去形容</p>
<ul>
<li>已售的我们使用1代表</li>
<li>未售的我们使用0代表</li>
<li>空位置我们使用-1代表</li>
</ul>
<p>上面的坐位就可以完全使用二维数组去表示 </p>
<p><img src="https://pic.imgdb.cn/item/613e1be444eaada739e26c1e.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210819161002970"></p>
<p><img src="https://pic.imgdb.cn/item/613e1c0544eaada739e2b86d.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210819161025607"></p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/JavaScript/">JavaScript</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/09/12/JavaScript%E7%AC%94%E8%AE%B0-2/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript笔记-2</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/09/08/CSS%E7%AC%94%E8%AE%B0-3/">
                        <span class="hidden-mobile">CSS笔记-3</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
